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队 括 前 后 端 多 项 技术 ， 全 栈 学 习 一 站 直达 : 











多 版 本 Chat 应 用 ， 贯 通 多 组 合 实现 : 
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数 子 版 权 声 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 
用 ,未 经 授权 ， 不 得 进行 传播 。 
我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产 
权 。 

如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 





. Azat Mardanov * 


资深 软件 工程 师 ， 带 领 团队 重 构 了 具 
有 5000 万 用 户 的 DocuSign; 社交 媒体 
新 闻 聚 合 网 Storify.com 工 程 师 ， 为 包括 
BBC、NBC、CNN、 白 宫 等 客户 提供 
服务 ; 原 Gizmo 首 席 技术 官 和 联合 创始 
人 ， 期 间 参 与 著名 的 500 Startups 商 业 
加 速 器 项 目 ; 科技 聚会 和 编程 马拉松 
活动 的 常客 ， 曾 和 FashionMetric.com 团 
队 一 起 在 AngelHack 活 动 上 12 次 入 围 决 
赛 ; General Assembly、Hack Reactor、 
pariSOMA 和 Marakana 等 机 构 的 讲师 ， 
其 技术 课程 获得 一 致 好 评 ; 技术 作 
者 ， 其 个 人 博客 webAppLog.com 一 度 成 
为 谷歌 搜索 “express.js tutorial” 结 果 中 
排名 第 一 的 教程 站 点 ; 他 还 曾 为 美国 
各 大 政府 机 构 开 发 关键 任务 应 用 。 另 
外 ， 他 还 著 有 Expressjs Guide、Practical 
Nodejs 等 书 ， 而 且 开 发 了 很 多 Nodejs 开 
源 项 目 (如 ExpressWorks、mongoui 以 及 
HackHall 等 ) 。 


; 胡 波 a 


网 名 jserme， 多 年 JavaScript 开 发 经 验 ， 
曾 负责 人 人 网 多 个 重要 产品 线 前 端 ， 
如 相册 、 日 志 等 。 现 在 ， 他 在 阿里 负 
责 广 告 投放 端 ]S 引 擎 及 推广 页 面 制作 
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内 容 提要 


本 书 涵盖 JavaScript 快速 开发 的 多 项 前 沿 技术 ， 是 极其 少见 的 前 后 端 技术 集大成 之 作 。 本 书 所 涉 技术 包 
括 Node.js、MongoDB、Twitter Bootstrap、LESS、jQuery、Parse.com、Heroku 等 ， 分 三 部 分 介绍 如 何 用 这 
些 技术 快速 构建 软件 原型 。 第 一 部 分 是 基础 知识 ， 让 大 家 真正 认识 前 后 端 及 敏捷 开发 ， 并 学 会 搭建 本 地 及 
云 环 境 。 第 二 部 分 与 第 三 部 分 分 别 介绍 如 何 构建 前 端 原型 和 后 端 原型 。 作 者 以 前 端 组 件 开篇 ， 通 过 为 一 个 
示例 聊天 应 用 Chat 打造 多 个 版 本 〈Web/ 移动 )， 将 前 端 和 后 端 结合 在 一 起 并 给 出 应 用 部 署 方式 。 

本 书 适合 进 阶 的 初学 者 和 中 级 Web 及 移动 开发 者 阅读 参考 ， 特 别 适 合 熟悉 Ruby on Rails、PHP、Perl、 
Python 或 者 Java 等 语言 的 程序 员 。 
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版 权 声 明 


Rapid Prototyping with JS: Agile JavaScript Development by Azat Mardanov. 
Copyright © 2012-2013 by Azat Mardanov. 


Simplified Chinese-language edition copyright © 2015 by Posts & Telecom Press. All rights reserved. 


本 书 中 文 简体 字 版 由 Azat Mardanov 授 权 人 民 邮 电 出 版 社 独家 出 版 。 未 经 出 版 者 书面 许可 ， 
不 得 以 任何 方式 复制 或 抄袭 本 书 内 容 。 


版 权 所 有 ， 侵 权 必 完 。 
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读者 反 饥 


“Azat 的 这 本 教程 在 我 们 为 开发 Sidepon.com 网 站 构建 的 用 户 体 验 中 起 了 至 关 重 要 的 作用 ， 同 
时 它 帮 助 我 们 优化 了 TheNextWeb.com， 并 成 功 列 利 。” 





Kenson Goo, Sidepon.com 


“阅读 此 书 和 其 中 的 例子 ， 让 我 得 到 了 很 多 乐趣 。 相 信 它 展示 的 例子 也 会 帮助 你 发 现 大 量 的 
技术 ， 这些 技术 是 每 个 人 都 应 该 在 自己 项 目 里 实践 的 。” 


一 一 Chema Balsas 
本 书 已 经 被 StartupMonthly" 成 功 地 用 作 培 训 ? 手 册 ， 这 里 是 一 些 学 员 的 感言 。 


“感谢 大 家 ， 特 别 是 Azat 和 Yuri。 我 很 享受 这 个 过 程 ， 现 在 有 了 极 大 的 动力 去 努力 了 解 这 些 
技术 。” 


一 一 Shelly Arora 


“谢谢 ， 和 大 家 在 一 起 的 这 个 周末 ， 我 们 使 用 Bootstrap 和 Parse 做 东西 ， 简 直 太 快捷 ， 太 神奇 
了 ! ” 





Mariya Yao 


“感谢 Yuri 以 及 所 有 人 。 这 是 一 次 很 棒 的 聚会 ， 非 常 有 教育 意义 ， 对 提升 我 的 JavaScript 技 能 
有 非常 明显 的 作用 。 期 待 将 来 能 与 大 家 一 起 工作 。” 





Sam Sur 





GD http:/startupmonthly.org 
© http://www.startupmonthly.org/rapid-prototyping-with-javascript-and-nodejs.html 
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网 上 资源 


让 我 们 在 网 上 成 为 朋友 ， 请 通过 以 下 方式 关注 我 们 。 
口 Twitter: @RPJSbook” 或 者 @azat co 

口 Facebook: facebook.com/RapidPrototyping WithJS® 
口 网 址 : rapidprototypingwithjs.com 

口 博客 : webapplog.com 

D GitHub: github.com/azat-co/rpjs 

口 Storify: Rapid Prototyping with JS® 


























你 还 可 以 通过 其 他 方式 联系 我 们 ， 如 下 。 


口 电子 邮件 : hi@rpjs.co 
口 谷歌 用 户 组 : rpjs@googlegroups.com 或 者 https://groups.google.com/foruny/#!forum/rpjs 








GD https://twitter.com/rpjsbook 

@) https://twitter.com/azat_co 

@® https:/www.facebook.com/RapidPrototypingWithJS 
(@ https://storify.com/azat_co/rapid-prototyping-with-js 
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致谢 





首先 ， 感 谢 本 书 文 字 编辑 David Moadel 和 技术 编辑 Alexander Vlasyuk。 感 谢 我 的 学 生 们 ， 他 
们 可 能 来 自 Hack Reactor"、Marakana” 、pariSOMA2 和 General Assembly”， 在 那里 我 用 本 书 作为 
音 训 教材 进行 教学 。 


此 外 , 我 还 要 感谢 StartupMonthly* 团 队 , 尤其 是 Yuri 和 Vadim。 谢 谢 他 们 为 我 使 用 本 书 进 行 培 
训 ® 及 本 书稿 提供 诸多 宝贵 的 建设 性 意见 。 


最 后 ， 感 谢 我 的 设计 师 朋 友 们 一 一 Ben 、Ivan 和 Natalie， 谢 谢 他 们 帮助 我 改进 了 封面 设计 。 
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提要 : 使 用 快速 原型 以 及 写作 本 书 的 原因 ; 回答 本 书 是 什么 、 不 是 什么 以 及 阅读 本 书 的 前 提 
条 件 ; 关于 使 用 本 书 及 相关 示例 的 建议 ; 解释 书 中 的 特定 格式 。 





本 书 作为 实践 指南 ,介绍 了 如 何 使 用 最 新 的 Web 及 移动 技术 快速 构建 软件 原型 。 这 些 技术 包 
插 Node.js”、MongoDB”、Twitter Bootstrap”、LESS”、jQuery” 、Parse.com”、Heroku”， 等 等 。 








为 什么 要 撰 瑟 本 书 


其 实 本 书 是 由 失望 激发 的 产物 。 作 为 一 名 具有 多 年 工作 经 验 的 软件 工程 师 ， 当 我 开始 学 习 
Nodejs 和 Backbonejs 时 ,发现 从 它们 的 官方 文档 人 手相 当 困 难 , 而 且 网 上 严重 缺少 快速 入 门 指南 
和 相应 的 示例 。 并 且 ， 你 基本 上 不 可 能 在 同一 个 地 方 找到 JS 相关 的 高 级 技术 的 所 有 教程 。 


最 好 的 学 习 方 式 就 是 实践 , 没 错 吧 ? 因此 我 通过 简单 的 小 例子 来 实践 ， 即 快速 入 门 指南 , 用 
来 快速 学 习 一 些 新 技术 。 在 完成 一 些 基 本 的 程序 后 , 我 需要 一 些 参考 文档 和 回顾 。 一 开始 我 写 这 
个 指南 只 是 自用 ， 以 加 深 对 这 些 概念 的 理解 ， 并 且 供 以 后 参考 。 在 StartupMonthly "我 教 了 几 次 为 
期 两 天 的 集中 课程 , 也 是 使 用 同样 的 理念 , 帮助 有 经 验 的 开发 者 使 用 JavaScript 进 行 敏 捷 开 发 。 我 
们 使 用 的 手册 得 到 了 很 多 反馈 ， 然 后 我 们 进行 了 大 量 更 新 。 最 终 的 成 果 就 是 你 面前 这 本 书 了 。 












































GD http://steveblank.com/2010/03/11/teaching-entrepreneurship-%E2%80%93-by-getting-out-of-the-building/ 
© http://nodejs.org 

@ http://mongodb.org 

(@ http://twitter.github.com/bootstrap 

©) http://lesscss.org 

© http://jquery.com 

© http://parse.com 

http://hreoku.com 

© http://startupmonthly.org 
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2 引 


本 书 内 容 

正常 情况 下 ， 读 者 一 定 会 期 待 这 里 有 一 些 快速 入 门 指 南 、 教 程 和 建议 ( 比如 ，Git 工 作 流 )。 
我 们 主要 介绍 如 何 编码 ， 而 非 阐述 理论 知识 ,因此 其 中 的 理论 会 直接 和 实践 部 分 相关 ， 对 于 更 好 
地 理解 相应 技术 〈 比如 JSONP 和 跨 域 请 求 ) 以 及 用 到 的 具体 方法 来 说 必 不 可 少 。 

除了 代码 示例 ， 本 书 几乎 介绍 了 所 有 安装 和 部 署 步 又 。 

你 将 从 前 端 组 件 开 始 , 学 习 一 个 聊天 ( Web/ 移 动 ) 应 用 程序 的 例子 。 这 个 程序 会 有 多 个 版 本 ， 
而 最 终 我 们 会 把 前 端 和 后 端 结合 到 一 起 , 然后 将 该 程序 发 布 到 生产 环境 。 这 个 聊天 程序 包含 典型 
Web 应 用 所 有 必要 的 组 件 ， 会 帮 你 建立 自己 开发 应 用 、 应 聘 好 工作 或 晋升 ， 甚 至 是 创业 的 信心 。 


zk 









































目标 读者 


本 书面 向 进 阶 的 初学 者 和 中 级 Web 及 移动 开发 者 ， 即 熟悉 Ruby on Rails、PHP、Perl、Python 
或 者 Java 等 其 他 语言 的 专家 。 这 类 开发 人 员 硕 望 学 习 更 多 的 JavaScript 及 Node.js 相 关 技术 来 快速 构 
建 Web 和 移动 程序 原型 ,但 可 能 没有 时 间 去 翻阅 ( 大 量 或 者 哪怕 些许 ) 官方 文章 。 我 们 并 非 想 通 
过 本 书 将 读者 成 就 为 专家 ， 而 是 希望 帮助 他 们 尽 可 能 快 地 构建 程序 。 


本 书 英 文书 名 Rapid Prototyping with JS: Agile JavaScript Development 直 译 为 “用 JS 快 速 构建 
原型 : JavaScript 敏 捷 开 发 "， 顾 名 思 义 ， 它 就 是 要 介绍 如 何 用 最 快 的 速度 以 Web 或 者 移动 应 用 的 
形式 构建 出 原型 。 这 正 是 Lean Startup "里 的 思想 ， 所 以 相对 来 说 本 书 对 于 创业 公司 的 创始 人 会 更 
有 意义 ， 但 大 公司 的 员工 同样 会 发 现 它 的 有 用 之 处 ， 特 别 是 当 他 们 想 要 掌握 新 技能 ， 想 要 晋升 
或 谋求 更 好 的 工作 时 。 


















































这 本 书 不 是 什么 

这 既 不 是 一 本 全 面 介绍 相关 框架 、 库 或 者 技术 (或 者 某 一 特定 技术 ) 的 书 ， 也 不 是 所 有 Web 
开发 技术 与 技巧 的 参考 书 。 本 书 中 的 例子 很 可 能 在 网 上 有 公开 可 用 的 类 似 源 代 码 。 

如 果 你 不 了 解 循环 、 条 件 判 断 语句 、 数 组 、 散 列 、 对 象 和 函数 等 编程 基础 概念 ， 请 不 要 奢望 
在 本 书 中 了 解 它们 。 此 外 ， 理 解 书 中 的 例子 也 将 非常 具有 挑战 性 。 

市 面 上 已 经 有 许多 特别 棒 的 书 介绍 了 基本 编程 方法 ， 本 书 最 后 就 给 出 了 一 个 此 类 书 的 列表 ， 
以 方便 大 家 查阅 。 再 次 提醒 大 家 注意 ,本 书 的 目的 是 讲述 敏捷 开发 而 非 重 述 编程 理论 和 计算 机 
科学 知识 。 


















































OO http://theleanstartup.com 
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3 
了 
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先决 条 件 
为 更 好 地 学 习 本 书 示例 和 相关 内 容 ， 你 需要 : 


口 关于 编程 的 基本 知识 ， 比 如 对 象 、 函 数 、 数 据 结 构 (数组 、 散 列 )、 循 环 ( for、while ) 
和 条 件 判 断 (if/else、switch ); 

口 基本 的 Web 开 发 技能 ， 包 含 但 不 仅 限 于 HTML 和 CSS; 

口 针对 本 书 示例 和 一 般 Web 开 发 我 们 强烈 推荐 Mac OS X 或 者 UNIX/Linux， 不 过 你 仍 可 以 掌 
握 基 于 Windows 系 统 的 敏捷 开发 技术 ; 

口 能 够 访问 网 络 ; 

口 5 ~ 20 小 时 的 时 间 ; 

口 信用 卡 或 者 借 记 卡 ， 因 为 即使 一 些 云 服务 的 免费 账户 也 需要 它们 。 











示例 


书 中 所 有 示例 的 源 代 码 均 可 参见 GitHub (http://github.com/azat-co/rpjs )， 你 也 可 以 下 载 ZIP 文 
件 " 或 者 使 用 Git 获 取 。 更 多 关于 怎样 安装 和 使 用 Git 的 内 容 请 参见 本 书后 面 的 介绍 。 源 代码 文件 、 
文件 夹 结 构 和 部 署 文 件 理 论 上 可 以 (或 者 稍 加 修改 后 ) 同时 在 本 地 和 远程 的 云 服 务 ( PaaS， 如 
Windows Azure 和 Heroku ) 上 正常 运行 。 


注意 ，GitHub 上 的 代码 和 书 中 的 代码 在 格式 上 可 能 稍 有 差别 。 男 外 ， 如 果 你 发 现任 何 bug， 
欢迎 通过 电子 邮件 (hi@rpjs.co ) 与 我 们 联系 。 


























格式 说 明 
下 面 是 源 代码 的 样式 : 


var object = {}; 
object.name = "Bob"; 


终端 命令 与 上 面 的 格式 差不多 ， 只 是 以 $ 开 头 : 





$ git push origin heroku 
$ cd /etc/ 
$s 1s 


行内 术语 采用 楷体 ， 命 令 名 ( 如 mongoa ) 使 用 等 宽 字 体 。 








GD https://github.com/azat-co/rpjs/archive/master.zip 
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4 引 


i 





术语 说 明 





本 书 中 会 使 用 可 以 互 换 的 术语 , 尽管 有 时 候 在 具体 上 下 文中 严格 来 说 它们 可 能 指 代 不 同 的 东 
西 。 举 几 个 例子 : function = method=call( 函数 = 方法 = 调用 )、attribute=property =member= key 
(属性 = 特性 = 成 员 = 键 )、value=variable( 值 = 变量 )、object=hash=class (对 象 = 散 列 = 类 )、 
list = array (列表 = 数组 )、framework = library = module (框架 = 库 = 模 块 )。 
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快速 入 门 


基础 知识 











提要 : 综述 HTML、CSS 和 JavaScript 语法 ; 简单 介绍 敏捷 开发 方法 ; 云 计算 、Node.js 和 
MongoDB 的 好 处 ; HITP 请 求 /响应 ， 以 及 REST 式 API 的 思想 。 


我 认为 每 个 人 都 应 该 学 会 为 计算 机 编程 , 这 会 教 你 如 何 去 思 考 。 计算 机 科学 
自由 的 艺术 ， 是 所 有 人 都 应 该 学 习 的 。 本 
一 一 史 蒂 夫 . 乔布斯 | 


1.1 定义 前 端 
1.1.1 综述 


Web 和 移动 应 用 开发 过 程 一 般 包 含 以 下 步骤: 


(1) 用 户 在 浏览 器 〈 客户 端 ) 里 输入 或 者 点 击 一 个 链接 ; 

(2) 浏览 器 向 服务 器 发 送 HTTP 请 求 ; 

(3) 服务 器 处 理 请 求 ， 如 果 查 询 字 符 串 或 者 请 求 体 里 含有 人 参数， 服务 器 也 会 把 这 些 参数 信息 
考虑 进去 ; 

(4) 服务 器 更 新 、 获 取 或 者 转换 数据 库 里 的 数据 ; 

(5) 服务 器 以 HIML 、JSON 或 者 其 他 格式 返回 一 个 HTTP 响应 

(6) 浏览 器 接收 HITP 响应 ; 

(7) 浏 览 器 以 HTML 或 者 其 他 格式 ( 比如 卫 EG 、XML 或 者 JSON ) 把 HTTP 响应 呈现 给 用 户 。 


移动 应 用 的 行为 动作 与 普通 网 站 相同 ， 只 不 过 原生 应 用 取代 了 浏览 器 。 其 他 主要 区 别 为 : 
宽带 来 的 数据 传输 限制 、 更 小 的 屏幕 、 更 高 效 地 使 用 本 地 存储 ， 


这 里 有 几 种 针对 移动 应 用 的 开发 方式 ， 每 种 各 有 利 浆 : 


口 用 Objective-C 和 Java 开发 的 原生 iOS 应 用 、Android 应 用 和 Blackberry 应 用 ; 
口 使 用 JavaScript 开发 , 但 是 使 用 Appcelerator" 或 者 类 似 的 工具 来 编译 为 原生 的 Objective-C 





有 




















GD http:/www.appcelerator.com/ 
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或 Java 应 用 ; 
口 通过 响应 式 设计 、Twitter Bootstrap 和 Foundation” 等 CSS 框架 、 常 规 CSS 或 其 他 模板 来 
适 配 小 屏幕 的 移动 网 站 ; 
口 使 用 Sencha Touch”、Trigger.io”、JO 构 建 包含 HTML、CSS、JavaScript 的 HTML5 应 用 ， 
然后 使 用 PhoneGap" 包 装 成 原生 应 用 。 








1.1.2 HTML 





HTML 本 质 上 不 是 编程 语言 , 而 是 一 组 用 来 描述 内 容 结构 和 格式 的 标记 。 HTML 标签 由 一 对 
尖 插 号 以 及 括号 内 的 标签 名 组 成 。 大 多 数 情 况 下 ， 内 容 会 包含 在 一 对 开始 标签 和 结束 标签 之 间 ， 
结束 标签 的 标签 名 前 有 一 个 针 杠 〈 / )。 


下 面 的 例子 里 ， 每 一 行 都 是 一 个 HTML 元 素 : 











<h2>Overview of HTML</h2> 
<div>HTML is a ...</div> 
<link rel="stylesheet" type="text/css" href="style.css" /> 


HTML 文档 会 有 一 个 html 标签 ， 所 有 其 他 元 素 都 是 html 标签 的 子 标签 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<h2>Overview of HTML</h2> 
<p>HTML is a ...</p> 
</body> 
</html> 


HTML 有 不 同 的 版 本 ,比如 DHTML XHTML1.0 XHTML1.1 .XHTML2 .HTML4 和 HTMIL5。 
这 篇 文章 对 它们 的 区 别 做 了 很 好 的 诠释 : Misunderstanding Markup: XHTML 2/HTML 5 Comic 
Strip” 。 





所 有 的 HTML 元 素 都 具备 一 些 属性 。 重 要 的 属性 如 下 : class、id、style、data-name、onclick 
以 及 其 他 事件 属性 。 





GD http://twitter.github.io/bootstrap/ 

© http://foundation.zurb.com/ 

@® http:/www.sencha.com/products/touch/ 

(@ http://trigger.io 

© http://joapp.com 

© http://phonegap.com 

© http://coding.smashingmagazine.com/2009/07/29/misunderstanding-markup-xhtml-2-comic-strip/ 
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class 











class 属性 定义 了 一 个 类 ， 以 便于 使 用 CSS 给 元 素 添加 样式 或 者 进行 DOM 操作 ， 比 如 : 





<p class="normal">...</p> 


id 





id 属性 定义 了 元 素 的 ID ， 作 用 有 点 像 class, 但 是 必须 是 唯一 的 ， 比 如 : 





<div id= 


style 


"footer">...</div> 








style 属性 定义 了 一 个 元 素 的 内 联 CSS， 比如: 





<font style="font-size:20px">...</font> 


title 








title 属 
呈现 的 。 比 如 








性 为 元 素 指定 了 一 些 额 外 信息 , 在 大 多 数 浏览 器 里 这 些 信 息 均 是 以 小 提示 条 的 形式 


<a title="Up-vote the answer">...</a> 


data-name 











data-name 属性 可 以 用 来 在 DOM 中 存储 一 些 元 数据 。 比 如 : 


<tr data-token="fal0a70c-21ca-4e73-aaf5-d889c7263a0e">...</tr> 





onclick 

onclick 属性 意味 着 在 点 击 事件 发 生 时 ， 内 联 的 JavaScript 代码 将 运行 ， 比 如 : 
<input type="button" onclick="validateForm();">...</a> 

onmouseover 





和 onclick 属性 类 似 ， 但 它 由 鼠标 悬 停 事件 触发 ， 比 如 : 








<a onmouseover="javascript: this.setAttribute('css','color:red')">...</a> 


其 他 与 内 联 JavaScript 代码 相关 的 HTML 属性 如 下 。 





口 onfocus: 当 浏览 器 的 焦点 聚集 在 某 个 元 素 上 时 和 触发。 
口 onblur: 当 浏 览 絮 的 焦点 离开 一 个 元 素 时 触发 。 

口 onkeydown: 用 户 按 下 键盘 上 的 键 时 触发 。 
Dondblclick: 用 户 双击 鼠标 时 触发 。 
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口 onmousedown: 用 户 按 下 鼠标 时 触发 。 
口 onmouseup: 用 户 释放 鼠标 时 触发 。 
口 onmouseout: 用 户 将 鼠标 移 开元 素 区 域 时 触发 。 
口 oncontextmenu: 用 户 点 击 鼠 标 右 键 时 触发 。 

完整 的 事件 列表 和 浏览 器 兼容 性 表格 请 参见 “Event compatibility tables”"。 

我 们 将 会 广泛 使 用 Twitter Bootstrap 里 的 类 ， 而 由 于 内 联 CSS 和 JavaScript 不 是 好 方案 ,我 
们 会 尽量 避免 内 联 。 不 管 怎样 , 了 解 一 下 JavaScript 事件 名 总 不 会 错 , 因为 在 jQuery、Backbone.js 
和 纯 JavaScript 中 我 们 常常 会 用 到 它们 。 把 内 联 的 属性 转换 为 IS 事件， 只 需要 把 on 前 级 去 掉 就 
行 了 ， 比 如 onclick 属性 就 是 指 click 事件 。 


你 还 可 以 从 以 下 三 个 网 站 看 到 更 多 相关 资料 : Catching a mouse click”、Wikipedia” 和 


w3schools®, 












































1.1.3 CSS 


CSS 是 一 种 控制 内 容 呈 现 和 格式 的 方式 。HTML 文档 可 以 通过 一 个 1ink 标签 引入 外 部 的 
CSS 文件 (如 前 面 的 例子 所 示 )， 也 可 以 直接 通过 style 标签 内 联 CSS 代码 ， 比 如 : 





























<style> 
body { 
padding-top: 60px; /* 上 内 边 距 为 60 像素 */ 
} 
</style> 


每 个 HTML 元 素 都 可 以 拥有 ia 和 /或 class 属性 : 


<div id="main" class="large"> 
Lorem ipsum dolor sit amet, 
Duis sit amet neque eu. 
</div> 


在 CSS 里 ,我 们 可 以 通过 元 素 的 ia、class、 标 签名 ， 以 及 它 与 父 级 标签 的 关系 或 者 元 素 
属性 值 来 定位 元 素 。 


下 面 的 规则 把 所 有 的 段落 〈p 标签 ) 的 颜色 变 成 了 灰色 ( #999999 ): 

















pl 
color:#999999; 


} 





GD http://www.quirksmode.org/dom/events/index.html 

@) https://developer.mozilla.org/en-US/docs/JavaScript/Getting Started#Example: Catching a mouse click 
@® http://en.wikipedia.org/wiki/HTML 

@ http://www.w3schools.com/html/html intro.asp 
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下 面 的 规则 通过 id main 定位 了 一 个 div， 并 且 设 置 了 它 的 内 边 距 : 





div#main { 
padding-bottom:2em; 
padding-top:3em; 

} 


下 面 的 规则 把 所 有 拥有 类 large 的 元 素 字 体 大 小 设置 为 14pt: 
.large { 
font-size:14pt; 


} 
div 是 pody 元 素 的 直接 子 元 素 ; 现在 要 隐藏 下 标签 div: 

















body > div { 
display:none; 


} 


设置 name 属性 为 smail 的 input 元 素 的 宽度 为 150px: 











input[name="email"] { 
width:150px; 
} 


更 多 信息 可 以 参考 Wikipedia" 和 w3schools”。 


CSS3 是 CSS 的 一 个 升级 版 , 它 可 以 直接 用 CSS 实现 圆 角 、 边框 和 渐变 , 而 CSS 如 果 想 运用 
这 些 功 能 ， 只 能 依靠 PNG/GIF 的 帮助 或 者 使 用 其 他 一 些小 技巧 才能 实现 。 


更 多 信息 可 以 参考 CSS3.info”、w3school*， 以 及 对 比 CSS3 和 CSS 的 文章 “CSS3 vs. CSS: A 


» © 








Speed Benchmark 


1.1.4 JavaScript 


JavaScript 是 1995 年 在 Netscape 以 LiveScript 开始 的 。 它 和 Java 的 关系 就 像 雷 锋 与 雷 峰 塔 的 
关系 一 样 ， 两 者 风 马 牛 不 相 及 。 现 在 ，JavaScript 在 Web 开发 的 前 后 端 都 有 使 用 ， 在 桌面 应 用 开 
发 中 也 占有 一 席 之 地 。 


把 JS 代码 放 进 HTML 文档 的 script 标签 里 是 使 用 JavaScript 的 最 简单 方式 : 























QD http://en.wikipedia.org/wiki/Cascading Style Sheets 

© http://www.w3schools.com/css/ 

@) http://css3.info 

@ http://www.w3schools.com/css/ 

© http://coding.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/ 
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<script type="text/javascript" language="javascript"> 
alert ("Hello world!"); 
/ /简单 的 提示 对 话 框 
</script> 
我 们 建议 你 不 要 把 HTML 与 JS 代码 混在 一 起 ， 为 了 把 它们 分 离开 ， 可 以 把 代码 移 到 一 个 外 
部 文件 中 ， 然 后 再 通过 设置 script 标签 的 源 属性 src="filename .js" 来 引入 外 部 的 js 文件 ， 
这 里 我 们 用 src="app.js": 





<script src="js/app.js" type="text/javascript" language="javascript"> 
</SCrIDtS 


注意 

@ 结束 标签 </script> 必 须 存 在 ,即使 像 我 们 这 样 引入 外 部 文件 后 它 是 一 个 没有 
内 容 的 标签 。 经 过 多 年 的 发 展 ，JavaScript 已 经 成 为 了 浏览 器 脚本 里 的 绝对 主 
导 者 ， 而 Type 和 language 已 经 不 是 必须 存在 的 了 。 

其 他 运行 JavaScript 代码 的 方式 : 

口 内 联 的 代码 (之 前 已 经 讲述 过 ); 

口 使 用 Webkit 的 浏览 器 开发 者 工具 和 FireBug 控制 台 ; 

口 Nodejs 的 交互 命令 行 。 


JavaScript 的 一 个 优点 就 是 它 是 弱 类 型 的 。 弱 类 型 是 相对 于 强 类 型 "语言 (如 C 和 Java ) 而 言 
的 ， 这 使 JavaScript 成 为 了 一 个 更 好 的 原型 语言 。 下 面 是 JavaScript 对 象 /类 ( 本 身 没 有 类 ; 对 象 
继承 自 对 象 ) 里 一 些 主 要 的 类 型 ; 

数值 原始 值 

数值 ， 比 如 : 

var mum = 1; 

数值 对 象 

数值 ?对 象 和 它 的 方法 ， 比 如 : 


Var mnumobj = new Number ("123"); // 数 值 对 象 
var num = numobj.valueOof(); // 数 值 原 始 值 


EE 


var numStr = numObj .toString(); // 字 符 串 表示 
字符 串 原始 值 
包含 在 单 引 号 或 者 双 引 号 之 间 的 字符 序列 ， 比 如 : 


























GD http://en.wikipedia.org/wiki/Strong typing 
@) https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_ Objects/Number 
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Var str = "some string"; 
Var newStr = "abcde".substr(1,2); 
为 了 方便 ，JS 自动 给 字符 串 原始 值 包装 上 字符 串 对 象 方法 ,但 是 它们 并 不 完全 相同 "的 。 


字符 串 对 象 

字符 串 对 象 有 很 多 非常 有 用 的 方法 ， 比 如 length、match， 来 看 个 例子 : 
var Strobj = new String("abcde");// 字 符 串 对 象 

var str = strObj.valueof(); J 串 原始 值 

strObj.match(/ab/); 

str.match(/ab/); // 两 种 调用 都 可 行 


正则 表达 式 对 象 
正则 表达 式 对 象 是 特殊 的 字符 模式 ， 以 方便 搜索 、 蔡 换 以 及 测试 字符 串 : 


Var pattern = /[A-Z]+/; 
str.match(/ab/); 


特殊 类 型 
当 你 有 疑问 的 时 候 , 可 以 使 用 typeof 对 象 来 看 看 它 的 类 别 。 下 面 是 JS 里 的 一 些 特殊 类 型 


口 NaN 
口 null 
口 undefined 


口 function 
全 局 方法 
你 可 以 在 代码 的 任意 地 方 调用 这 些 方法 ， 因 为 它们 是 全 局 方法 : 


口 decodeURI 














口 decodeURIComponent 
口 encodeURI 

D encodeURIComponent 
DQ eval 

DQ isFinite 

D isNaN 

D parseFloat 





D parseInt 





QD https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global Objects/String#Distinction between string primi 
tives_and String objects 
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口 uneval 
口 Infinity 
口 Intl 





JSON 
JSON 库 帮 助 我 们 序列 化 和 解析 JavaScript 对 象 ， 比 如 : 


Var obj = JSON.parse('{a:1, b:"hi"}'); 
Var stringObj = JSON.stringify({a:1,b:"hi"}); 


数组 对 象 
数组 "是 从 0 开始 索引 的 列表 。 例 如 ， 创 建 一 个 数组 : 


Var arr = new Array(); 
Var arr = ["apple", "orange", 'kiwi"]; 


数组 有 一 些 非常 好 用 的 方法 ， 比 如 indexof 、slice、join。 你 要 确保 自己 对 它们 非常 熟 
因为 如 果 能 够 正确 使 用 ， 它 们 将 帮 你 节省 很 多 时 间 。 


数据 对 象 


Var obj = {name: "Gala", url:"img/galal00x100.jpg",price:129} 


Var obj = new Object(); 

下 面 是 一 些 继承 模式 。 

布尔 原始 值 和 对 象 

就 像 字符 串 和 数值 ， 布 尔 值 既 可 以 是 原始 值 ， 也 可 以 是 对 象 。 
var booll = true; 


Var bool2 = false; 
Var boolObj = new Boolean (false); 


日 期 对 象 
日 期 ”对象 帮助 我 们 处 理 日 期 和 时 间 ， 比 如 : 


Var timestamp = Date.now(); // 1368407802561 
Var d = new Date(); //Sun May 12 2013 18:17:11 GMT-0700 (PDT) 





GD https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global Objects/Array 
@) https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_ Objects/Boolean 
® https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_ Objects/Date 
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数学 对 象 
数学 常量 和 一 些 方法 ”， 比 如 : 


Var X = Math.floor(3.4890); 
var ran = Math.round(Math.random()*100); 


浏览 器 对 象 
用 于 访问 浏览 器 及 其 一 些 属 性 ， 比 如 URL， 来 看 个 例子 : 








window.location.href = 'http://rapidprototypingwithjs.com'; 
console.log("test"); 
DOM 对 象 


document .write("Hello World"); 
Var table = document.createElement ('table'); 
var main = document .getElementById('main'); 


警告 
人 全: JavaScript 支持 的 数字 大 小 上 限 为 53 位 数 ， 如 果 你 需要 处 理 比 这 个 大 的 数字 ， 
那么 最 好 使 用 一 些 大 数字 库 。 


你 可 以 在 MozillaDeveloperNetwot2 和 w3schooE 网 站 上 找到 完整 的 JavaScript 和 DOM 对 象 参考 。 





如 果 你 还 想 了 解 JS 的 一 些 资源 ， 比 如 ECMA 规范 ， 请 查看 这 个 列表 : JavaScript Language 
Resources”。 本 书 撰写 之 时 ， 最 新 的 JavaScript 规范 是 ECMA-262 Edition 5.1: PDF* 和 HTML®。 


函数 式 和 原型 语言 是 JS 的 另 一 个 重要 特性 。 一 般 的 函数 声明 语法 是 这 样 的 : 














function Sum(a， 
Var sum = at+t 
return sum; 


b) { 
b; 


} 


console.log(Sum(1, 2)); 


由 于 函数 式 编程 特性， 函数 在 JS 里 是 一 等 公民 *。 函 数 可 以 用 作 变 量 和 对 象 ， 比 如 ,一 
函数 可 以 作为 男 一 个 函数 的 参数 传递 
































GD https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_ Objects/Math 
© https://developer.mozilla.org/en-US/docs/JavaScript/Reference 

@® http:/www.w3schools.com/jsref/default.asp 

(@ https://developer.mozilla.org/en-US/docs/JavaScript/Language_ Resources 

© http:/www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf 

©© http://www.ecma-international.org/ecma-262/5.1/ 

© http:/en.wikipedia.org/wiki/Functional programming 
http://en.wikipedia.org/wiki/First-class_function 
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Var f = function(str1) { 
return function(str2) { 
return strl + ' "+ Str2; 
ey 

}s 

Var a = f('hello'); 

var b = f('goodbye'); 

console.log((a(l'Catty')); 

console.log( (bl('Doggy')); 


了 解 几 种 在 JS 里 中 的 对 象 继 承 方式 也 很 有 用 : 
口 伪 类 继承 ? 


如 果 你 想 进一步 了 解 继承 方式 ， 请 查看 “Inheritance Patterns in JavaScript”“ 和 “Inheritance 


» 团 
Ie 








revisited 
更 多 关于 浏览 器 里 的 JS 的 资料 可 以 从 网 站 Mozilla Developer Network”、Wikipedia” 和 
w3schools” 中 找到 。 


1.2 ”敏捷 开发 概述 


由 于 像 瀑布 流 这 样 的 传统 软件 开发 方法 在 不 确定 性 很 高 的 情况 下 即 解 决 办 法 未 知 ”) 难以 
很 好 地 工作 , 因此 敏捷 软件 开发 方法 应 运 而 生 , 一 点 一 滴 发 展 起 来 。 敏捷 方法 包括 Scrum/Sprint、 
测试 驱动 开发 、 持 续集 成 、 并 行 开发 和 其 他 实践 方法 ， 很 多 都 是 借鉴 极限 编程 。 


























1.2.1 Scrum 


对 于 管理 ， 敏 捷 使 用 Scrum 方法 。 如 果 想 了 解 更 多 关于 Scrum 的 知识 ， 请 阅读 : 
D Scrum Guide (PDF ) ©; 
D Scrum.org"; 








GD http://www.crockford.com/javascript/inheritance.html 

© http://javascript.info/tutorial/pseudo-classical-pattern 

@® http://bolinfest.com/javascript/inheritance.php 

(@ https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Inheritance_ Revisited 

(©) https://developer.mozilla.org/en-US/docs/JavaScript/Reference 

© http://en.wikipedia.org/wiki/JavaScript 

© http://www.w3schools.com/js/default.asp 
http://www.startuplessonslearned.com/2009/03/combining-agile-development-with.html 
© http://www.scrum.org/storage/scrumguides/Scrum Guide.pdf 

(0 http://www.scrum.org/ 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 





口 维基 百科 上 关于 Scrum 软件 开发 的 文章 "。 

Scrum 由 一 个 个 短 周期 组 成 , 每 个 周期 叫 Sprint。 一 个 sprint 通常 持续 一 到 两 周 。 典 型 的 sprint 
是 在 sprint 计划 会 议 上 开始 和 结束 的 ， 这 些 会 议 同 时 会 把 新 任务 分 配给 团队 成 员 。 新 任务 不 能 添 
加 到 正在 进行 的 sprint 里， 它们 只 能 在 sprint 计划 会 议 上 添加 。 

每 天 的 scrum 会 议 是 Scrum 方法 体系 的 重要 组 成 部 分 , Scrum 正 是 因此 得 名 。 每 一 个 scrum 通 
常 是 在 走廊 里 进行 的 $ ~ 15 分钟 的 会 议 。 在 scrum 会 上 ， 每 一 个 团队 成 员 要 回答 下 面 三 个 问题 : 

(1) 自己 昨天 做 了 什么 ; 

(2) 今天 准备 做 什么 ; 

(3) 是 否 需要 从 其 他 团队 成 员 那 里 得 到 些 什么 。 

与 瀑布 流 开发 相 比 ， 敏 捷 开发 更 加 灵活 ， 特 别 是 在 高 度 变化 的 环境 ( 创业 初期 ) 中 。 

敏捷 开发 的 好 处 : 在 没 法 提前 规划 时 , 或 者 需要 收集 用 户 反 馈 作 为 主要 决策 因素 时 , 敏捷 开 
发 非常 高 效 。 
1.2.2 ”测试 驱动 开发 

测试 驱动 开发 ， 也 叫 TDD， 包 含 下 面 的 步骤 ， 

(1) 使 用 断言 (true 或 false ) 为 新 功能 、 新 任务 或 者 增强 写 下 失败 的 自动 测试 用 例 ; 

(2) 写 出 能 够 成 功 通过 测试 的 代码 ; 

(3) 如 果 需 要 ， 重 构 代 码 ， 添 加 功能 ， 同 时 保证 测试 用 例 通过 ; 

(4) 重复 上 面 的 步骤 直到 所 有 任务 都 完成 。 

测试 可 以 分 为 功能 测试 和 单元 测试 。 单 元 测试 通过 模拟 依赖 测试 系统 单元 、 函 数 和 方法 ， 功 
能 测试 (也 叫 集成 测试 ) 是 包含 依赖 的 情况 下 测试 一 系列 功能 。 

测试 驱动 开发 的 好 处 : 
口 更 少 的 错误 和 缺陷 ; 
口 更 有 效 的 代码 ; 
口 确保 代码 可 以 正常 工作 ， 并 且 不 会 影响 已 有 功能 。 







































































1.2.3 ”持续 部 署 和 集成 


持续 部 署 ， 也 叫 CD， 是 一 系列 技术 的 组 合 ， 可 以 快速 把 开发 好 的 新 功能 、 错 误 修复 和 增强 
功能 呈现 给 用 户 。CD 包含 自动 测试 和 上 自动 部 署 。 持 续 部 署 可 以 减少 我 们 的 手工 劳动 ， 尽 可 能 地 
缩短 收集 反馈 的 时 间 。 一般 来 说 ,开发 者 越 快 地 从 用 户 那 里 收集 反馈 ,就 能 越 快 地 增强 产品 ， 这 
对 于 竞争 来 讲 非常 有 利 。 很 多 创业 公司 一 天 就 部 署 很 多 次 , 相 比 之 下 ， 有 些 成 熟 的 大 公司 一 次 发 








QD http://en.wikipedia.org/wiki/Scrum (development) 
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布 周 期 就 要 半年 甚至 一 年 的 时 间 。 
持续 部 署 的 好 处 : 减少 反馈 时 间 和 手工 劳动 。 
关于 持续 部 署 和 持续 集成 的 区 别 ， 请 参考 这 篇 文章 : Continuous Delivery vs. Continuous 
Deployment vs. Continuous Integration - Wait huh?"。 
下 面 是 流行 的 持续 集成 解决 方案 。 
口 Jenkins”: 开源 的 可 扩展 持续 集成 服务 器 。 
D CircleCI : 更 好 更 快 的 代码 。 
口 Travis CI"; 一 个 针对 开源 社区 的 持续 集成 托管 服务 。 

















1.2.4 ”结对 编程 


结对 编程 是 两 个 开发 者 在 同一 个 环境 里 一 起 工作 的 技术 。 其 中 一 个 开发 者 为 “驾驶 员 ”， 男 
一 个 为 “观察 员 ”。 驾 驶 员 主 要 负责 写 人 代码， 观察 员 围 观 并 且 提 供 建议 。 一 段 时 间 后 两 者 互 换 角 
色 。 驾 驶 员 的 角色 更 多 关注 当下 的 任务 ， 观 察 员 则 需要 有 大 局 观 ， 发 现 错误 并 且 改 进 算法 。 
结对 编程 的 优势 : 
口 两 人 可 以 一 起 产 出 更 简洁 、 更 高 效 的 代码 ， 同 时 降低 引发 错误 和 缺陷 的 几率 ; 
口 此 外 还 有 一 个 附加 的 好 处 ， 那 就 是 程序 员 们 在 一 起 工作 时 彼此 可 以 交流 和 传递 知识 。 但 
是 ,程序 员 间 也 可 能 会 发 生 冲 突 ， 而 且 这 并 不 少见 。 



































1.3.1 Node.js 


Node.js 是 事件 驱动 异步 TO 开源 程序 ， 可 以 用 来 创建 可 伸缩 且 高 性 能 Web 服务 器 。Node.js 
由 谷歌 的 V8 JavaScript 引 擎 5” 组成， 由 云 服 务 公司 Joyent" 维 护 。 


Node.js 项 目的 本 意 及 其 使 用 就 像 Twisted" 之 于 Python , 或 者 EventMachine* 之 于 Ruby 那样 。 











GD http://blog.assembla.com/assemblablog/tabid/12618/bid/92411/Continuous-Delivery-vs-Continuous-Deployment-vs-Continuous- 
Integration-Wait-huh.aspx 

©® http://jenkins-ci.org/ 

©®@ https://circleci.com/ 

@ https://travis-ci.org/ 

(©) http://en.wikipedia.org/wiki/V8 (JavaScript_engine) 

(oO http://joyent.com 

@ http://twistedmatrix.com/trac/ 

http://rubyeventmachine.com/ 
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用 JavaScript 来 实现 Node 是 继 Ruby 和 C++ 语言 之 后 的 第 三 次 尝试 。 





Nodejs 本 身 并 非 Ruby on Rails 那样 的 框架 ， 它 和 PHP+Apache 的 相似 度 更 高 。 在 第 6 章 ， 
我 们 将 详尽 介绍 Node,js 的 框架 。 


使 用 Node.js 有 如 下 优势 。 


口 JavaScript 语言 作为 Web 和 移动 开发 的 业界 标准 ， 开 发 人 员 熟 悉 他 的 可 能 性 更 高 。 

口 前 后 端 用 同一 个 编程 语言 进行 开发 ， 可 以 加 快 写 代码 的 过 程 。 开 发 者 的 思维 不 需要 在 不 
同 的 语法 间 切 换 ( 上 下 文 切换 )， 而 且 他 们 可 以 更 快 地 学 习 各 种 方法 和 类 。 

口 使 用 Nodejs 可 以 更 快速 地 搭建 原型 ,做 市 场 开 发 ,提前 获取 用 户 。 与 使 用 PHP 或 者 MySQL 
等 不 太 敏捷 的 技术 的 公司 相 比 ， 这 是 很 重要 的 优势 。 

口 Node.js 可 以 通过 Web-sockets 支持 实时 应 用 程序 。 


























如 果 你 想 了 解 更 多 信息 , 请 阅读 Wikipedia”、Nodejs.ore”、ReadWrite” 及 O’Reilly” 上 的 文章 。 





如 果 你 想 了 解 我 们 写作 本 书 时 Nodejs 的 情况 ， 请 参考 Isaac Z. Schlueter 于 2013 年 制作 的 幻 
灯 片 “State of the Node”®。 


1.3.2 NoSQL 和 MongoDB 


MongoDB 来 自 于 huMONGOus， 是 可 以 用 于 大 数据 的 高 性 能 非 关 系 型 数据 库 。 由 于 传统 的 
关系 型 数据 库 管理 系统 (RDBMS ) 无 法 应 对 大 数据 的 挑战 ，NoSQL 概念 应 运 而 生 。 


MongoDB 有 如 下 优势 。 


口 可 伸缩 性 : 由 于 其 分 布 性 特性 ， 可 以 在 多 个 服务 器 和 数据 中 心 放置 匈 余 数据 。 

口 高 性 能 : MongoDB 在 存储 和 检索 方面 非常 高 效 ， 部 分 原因 是 数据 库 中 元 素 与 集合 之 间 关 
系 上 的 弱 处 理 。 

口 灵活 性 : 键 - 值 对 存储 非常 适合 原型 开发 ， 因 为 它 使 用 户 不 需要 关心 表 关 系 ， 不 需要 修复 
数据 模型 ， 不 需要 关注 复杂 的 数据 迁移 。 























1.3.3” 云 计算 
云 计算 由 下 列 服 务 组 成 : 





GD http://en.wikipedia.org/wiki/Nodejs 

© http://nodejs.org/about/ 

©® http://readwrite.com/2011/01/25/wait-whats-nodejs-good-for-aga 
(@ http://radar.oreilly.com/2011/07/what-is-node.html 

© http://j.mp/2013-state-of-the-node 
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口 基础 设施 即 服务 (IaaS )， 比 如 Rackspace 、Amazon Web Services; 

口 平台 即 服务 ( PaaS )， 比 如 Heroku、Windows Azure; 

口 后 端 即 服务 (BaaS ， 最 新 、 最 酷 的 一 种 )， 比 如 Parse.com 、Firebase; 
口 软件 即 服务 ( SaaS )， 比 如 Google Apps 、Saleforce.com。 


云 应 用 平台 具备 以 下 功能 : 


口 可 伸缩 性 ， 例 如 在 几 分 钟 内 产生 新 的 实例 ; 

口 部 署 简单 ， 即 向 Heroku 部 署 ， 只 需要 $ git push; 

口 现 收 现 付 制 ， 用 户 根据 需要 添加 和 删除 内 存 及 磁盘 空间 ; 
口 可 扩展 ,方便 安装 和 设置 数据 库 、 应 用 服务 器 、 程 序 包 等 ; 
口 安全 和 技术 文 持 。 




















PaaS 和 BaaS 非常 适合 构建 原型 ， 一 般 用 来 创建 MVP ( Minimal Viable Product， 最 小 化 且 可 
行 的 产品 )， 供 那些 尚 处 于 创业 初始 阶段 的 团队 使 用 。 


下 面 是 一 些 为 人 熟知 的 Paas 提供 商 : 





口 Heroku” 

口 Windows Azure” 
口 Nodejitsu2 

口 Nodester® 





1.3.4 HTTP 请求 和 响应 
每 一 个 HTTP 请 求 和 响应 均 由 下 面 这 些 组 件 构成 。 


(D 头 部 (header ): 关于 编码 、 主 体 的 长 度 、 来 源 、 内 容 类 型 等 的 信息 。 
(2) 主体 (body ): 内 容 ， 一 般 是 参数 或 者 数据 ， 通 常 传递 给 服务 器 ， 或 者 返回 给 客户 端 。 


另外 ，HTTP 请 求 包含 以 下 几 方 面 内 容 。 




















口 方法 : 一 些 请 求 方法 ， 比 如 常见 的 GET、POST、PUT、DELETE。 
口 URL: 主机 、 端 口 和 路 径 ， 比 如 https://graph.facebook.com/498424660219540。 
口 查询 字符 串 : URL 里 问号 之 后 的 所 有 字符 ， 比 如 ?q=rpjs&page=20。 











OO http://heroku.com 

© http://windowsazure.com 
@® http://nodejitsu.com/ 

@ http:/nodester.com 
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1.3.5 REST 式 API 








由 于 在 分 布 式 系统 中 每 个 事务 都 需要 包含 足够 多 关于 客户 端 状态 的 信息 ，REST ( REpresen- 
tational State Transfer ) 式 API 因此 流行 起 来 。 从 某 种 意义 上 来 说 ， 这 个 标准 也 是 无 状态 的 ， 因 为 客户 
端的 状态 并 不 会 保存 在 服务 器 上 ， 这 样 才 使 得 每 一 个 请 求 可 以 分 发 到 不 同 的 服务 系统 上 进行 处 理 。 





REST 式 API 的 特征 : 


词组 合 ; 


























口 有 更 好 的 可 伸缩 性 ， 因 为 它 支 持 把 不 同 的 组 件 部 署 到 不 同 的 服务 器 上 ; 
口 替代 SOAP ( Simple Object Access Protocol， 简 单 对 象 访问 协议 )， 因 为 它 简单 的 动词 和 名 


口 充分 利用 HTTP 方法 ,例如 GET、POST、DELETE、PUT、OPTIONS， 等 等 。 


下 面 是 一 个 简单 的 REST 式 API 的 例子 , 它 包 含 了 对 消息 的 创建 、 读 取 、 更 新 、 删 除 ( CRUD ) 




















功能 
方 法 URL 含 义 
GET /messages.json 以 JSON 格 式 返 回 消 息 列表 
PUT /messages.json 更 新 或 者 替换 所 有 的 消息 ， 以 JSON 格 式 返 回 状 态 或 者 错误 信息 
POST /messages.json 创建 一 个 新 销 息 ， 以 JSON 格 式 返回 它 的 ID 
GET /messages/ {id} json 以 JSON 格 式 返回 ID 为 fid} 的 某 个 消息 
PUT /messages/{id} .json 替换 或 者 更 新 站 为 fid} 的 消息 ， 如 果 不 存在 就 创建 
DELETE /messages/ {id}.json 删除 也 为 {id} 的 消息 ， 以 JSON 格 式 返 回 状态 或 者 错误 信息 














REST 不 是 一 种 协议 ， 而 是 一 种 比 诸如 SOAP 这 样 的 协议 更 灵活 的 架构 。 因 此 ， 当 我 们 需要 获 
得 一 些 格式 方面 的 支持 时 , 它 的 URL 可 以 形 如 /messages/1List.html 或 者 /messages/1ist.xml。 


| 


PUT 逢 
回 结果 是 一 样 的 。 


























DELETE 是 寡 等 方法 "， 这 意味 着 如 果 服 务 器 接收 到 两 个 或 者 更 多 个 类 似 的 请 求 ， 返 


GET 是 蜂 零 的 ，PosT 是 非 帘 等 的 ， 它 们 可 能 影响 状态 并 且 导 致 副作用 。 
更 多 关于 REST API 的 内 容 ， 敬 请 参阅 Wikipedia ”和 “A Brief Introduction to REST article”” 


一 广 。 








QD http:/en.wikipedia.org/wiki/Hypertext Transfer Protocol#Idempotent methods and web applications 


© http://en.wikipedia.org/wiki/Representational state_transfer 


@® http:/www.infoq.com/articles/rest-introduction 
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提要 : 给 出 关于 工具 集 的 一 些 建议 ;逐步 安装 本 地 组 件 ; 为 使 用 云 服务 做 准备 。 


2.1 本 地 环境 搭建 


2.1.1 开发 目录 


如 果 你 没有 特定 的 用 来 做 Web 开发 的 目录 ， 建 议 在 Documents ( 中 文系 统 里 一 般 显示 为 文 
档 ) 目 录 里 创建 名 为 Development 的 目录 ， 它 的 路 径 将 会 是 Documents/Development,。 使 用 
了 创建 一 个 rpjs 目录 ， 它 的 路 径 将 会 是 Documents/Deve- 


示例 代码 ， 在 刚 创建 的 目录 里 再 
lopment/rpjs， 可 以 在 Mac OS 义 上 使 用 Finder 或 者 在 OS X/Linux 系统 上 使 用 下 面 的 命令 : 












































$ cd ~/Documents 
$ mkdir Development 
$ cd Development 
$ mkdir rpjs 
AMO Terminal 一 bash 一 77x8 


Last login: Sun Aug 25 13:00:45 on ttys000 
Azats-Air:~ azat$ cd ~/Documents 
Azats-Air:Documents azat$ mkdir Development 
Azats-Air:Documents azat$ cd Development 


Azats-Air:Development azat$ mkdir rpjs 
Azats-Air:Development azat$ 





初始 开发 环境 设置 





GD http://en.wikipedia.org/wiki/Ken_Thompson 
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提示 
在 MacOS 上 如 果 想 通 端 在 当前 目录 里 打开 Finder 应 用 ， 只 需 输入 并 执行 
$ open .命令 。 


查看 文件 和 目录 ， 使 用 下 面 的 命令 





$s 1ls 
把 隐藏 的 文件 和 目录 ( 例如.git ) 也 显示 出 来 ， 使 用 下 面 的 命令 
$ ls -lah 




















除了 s 1s， 我 们 还 可 以 使 用 $s 1s -alt。-1lanh 和 -alt 参数 的 不 同 之 处 在 于 ， 前 者 是 按 文 
件 字 母 排 序 ， 后 者 按 文件 时 间 排 序 。 


注意 
@ 你 可 以 使 用 Tab 键 来 自动 完成 文件 和 目录 名 。 
接 下 来 ， 你 可 以 复制 示例 到 rpjs 目录 并 创建 应 用 。 





注意 
@ 另 一 件 有 用 的 事情 是 设置 Finder 的 “新 建 位 于 文件 夹 位 置 的 终端 ”选项 。 打开 
“系统 设置 ”( 可 以 通过 “Command+ 空格 ”使 用 Spotlight 搜索 ), 找到 “键盘 ” 
并 太 击 ， 打 开 “ 键 盘 快 捷 键 "， 点 击 “服务 "， 勾 选 “ 新 建 位 于 文件 夹 位 置 的 终 
端 标签 ”和 “新 建 位 于 文件 夹 位 置 的 终端 窗口 ”设置 快捷 键 即 可 。 


2.1.2 浏览 





我 们 建议 你 下 载 最 新 的 Webkit? 或 者 Gecko” 浏 览 器 : Chrome”、Safari? 或 者 Firefox”。Chrome 
和 Safari 已 经 内 置 了 开发 者 工具 ，Firefox 需要 安装 插件 Firebug"。 











GD http://en.wikipedia.org/wiki/WebKit 

© http:/en.wikipedia.org/wiki/Gecko_(layout_engine) 
©® http:/www.google.com/chrome 

@ http://www.apple.com/safari/ 

© http:/www.mozilla.org/en-US/firefox/new/ 

© http://getfirebug.com/ 
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TCRITTTTTT 











Chrome 开发 者 工具 
Firebug 和 开发 者 工具 可 以 帮助 开发 者 完成 诸如 下 面 的 事情 : 


口 调试 JavaScript; 

口 修改 HTML 和 DOM 元 素 ; 

口 实时 修改 CSS ; 

口 监控 HTTP 请 求 和 响应 ; 

口 运行 性 能 分 析 ， 查 看 堆 转 储 ; 

口 查看 已 经 加 载 的 资源 ， 如 图 片 、CSS 和 JS 文 件 。 

















《》 Developers “IETTD BE] 


Home Predects = Coreem how Lm Oops 





Chrome DevTools 





How to access the DevTools 


To scene pe Ovv oss. apen web page of wat spp n Come Core Then tenn ere of pm isomrg ectore 


,bre we Ome mons S pm sm， 





dy ran re en Pe vol Too Doreiope one 




















关于 Web Deb 工具 的 谷歌 教程 





灵 社 区 会 员 whitebaby 专 享 尊重 版 权 





20 第 2 章 设 置 





非常 棒 的 Chrome 开发 者 工具 教程 有 : 


口 Code School， 探索 和 掌握 Chrome 开发 者 工具 ?"; 
口 Chrome 开发 者 工具 视频 2; 
口 Chrome 开发 者 工具 概述 ”。 





n 
ac ete yerem Ono 


© ] sseover-cemsoh codeschootcom 











Explore and Master 
Chrome DevTools 


[7 了 7 人 > 

















掌握 Chrome 开发 者 工具 








2.1.3 IDE 和 文本 编辑 器 


使 用 JavaScript 最 棒 的 一 点 就 是 不 需要 编译 代码 。 因 为 凡是 在 浏览 器 里 执行 的 , 所 以 在 浏览 


器 里 就 可 以 对 其 进行 调试 。 因 此 强烈 建议 你 使 用 轻 量 级 的 文 





本 编辑 需 ， 而 不 是 大 而 全 的 IDE 





( Integrated Development Environment' ,集成 开发 环境 ), 但 是 如 果 你 已 经 对 像 Eclipse” NetBeans”、 


Aptana 之 类 的 IDE 非常 熟悉 和 适应 了 ， 完 全 可 以 继续 使 用 。 





GD http://discover-devtools.codeschool.com/ 

© https://developers.google.com/chrome-developer-tools/docs/videos 
©) https://developers.google.com/chrome-developer-tools/ 

(@ http://en.wikipedia.org/wiki/Integrated_development_environment 
© http:/www.eclipse.org/ 

© http://netbeans.org/ 

© http://aptana.com/ 
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Home Dow oad Buy Biog Forum Svpport 


ols Text 


Sublime Text sa 
You love the sic 








Use Msple Seiectons to rerame variabies quckoy. «1/6 
Here ¥D is used to seiect Pe net occurrence of Pe current word. 


oo0icsd fo OS Xm 


Sublime Text 代码 编辑 器 首页 
下 面 是 一 些 常用 于 Web 开发 的 文本 编辑 器 和 IDE。 








口 TextMate :只 有 Mac OSX 版 本 ,1.5 版 本 可 免费 试用 30 天 ,号 称 The Missing Editor for Mac 
OS X。 

口 Sublime Text”: Mac OS X 和 Windows 版 本 都 有 ， 是 比 TextMate 更 好 的 编辑 器 ， 无 限 
期 试用 。 

口 Coda”: 一 体 化 的 编辑 器 ， 带 有 FTP 浏览 器 和 预览 ， 支 持 使 用 iPad 进行 开发 。 

口 Aptana Studio”; 全 面 的 IDE， 包含 内 建 的 终端 和 其 他 很 多 工具 。 

口 Notepad ++”: Windows 特有 的 开源 轻 量 级 文本 编辑 器 ， 支 持 多 种 语言 。 

口 WebStorm IDE”: 功能 丰富 的 IDE， 可 以 做 Node.js 调试 ;由 JetBrains 开发 ， 称 为 “最 智 
能 的 JavaScript IDE”。 





























GD http://macromates.com/ 

© http://www.sublimetext.com/ 

@® http://panic.com/coda/ 

(@ http://aptana.com/ 

© http://notepad-plus-plus.org/ 

© http://www.jetbrains.com/webstorm/ 
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ANN s 
和 Me oe We we eo oe» 





$C wew tbrans com westom 





dBRAINS 


w WebStorm 
Oe WharsNew Fetesb Sreenshots DocsSDemos QukkstartGuide Downicoad By 8 Upgrade 


WebStorm — The smartest JavaScript IDE 


WebStorm 6 Released! 


Typeiret roare eee 





WebStorm IDE 首页 


2.1.4 ”版 本 控制 系统 

版 本 控制 系统 "在 只 有 一 个 开发 者 的 情况 下 也 应 该 使 用 。 很 多 云 服务 ,例如 Heroku， 部 署 时 
也 需要 Git。 同 时 强烈 建议 你 使 用 Git 和 Git 终端 命令 ， 而 不 是 带 有 图 形 用 户 界面 的 Git 可 视 化 客 
户 端 /应 用 ， 例 如 GitX”、Gitbox”、GitHub for Mac”。 

Subversion 是 一 个 非 分 布 式 版 本 控制 系统 。GitSvnComparison ”这 篇 文章 对 比 了 Git 和 


Subversion。 
下 面 是 在 机 器 上 安装 和 设置 Git 的 步骤 。 


(1) 从 http:/git-scm.com/downloads 下 载 最 新 版 的 适用 于 你 的 操作 系统 的 Git。 

(2) 利用 下 载 的 * .amg 包 安 装 Git， 即 运行 * .pkg 文件 ， 并 按照 步 又 操作 。 

G) 在 OSX 上 通过 “Command + 空格 ”打开 Spotlight 搜 索 ( 见 下 面 的 截图 )， 查 找 并 打开 终 
端 。 在 Windows 上 可 以 使 用 PuTTY "或 者 Cygwin 。 








GD http://en.wikipedia.org/wiki/Revision control 

© http://gitx.frim.nl/ 

©® http:/www.gitboxapp.com/ 

(@ http://mac.github.com/ 

©) https://git.wiki.kernel.org/index.php/GitSvnComparison 
©© http://www.chiark.greenend.org.uk/~sgtatham/putty/ 

© http://www.cygwin.com/ 
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(4) 在 终端 里 输入 下 面 的 命令 , 把 John Doe 和 johndoe@example.com 替换 成 你 的 名 字 和 邮箱 





$ git config --global user.name "Jonh Doe" 
$ git config --global user.email johndoe@example.com 


(5) 检查 安装 的 版 本 ， 运 行 命令 : 
$ git version 


(6) 你 在 终端 里 会 看 到 类 似 下 面 的 文字 (在 你 的 电脑 上 ， 版 本 可 能 有 所 不 同 ， 我 们 的 版 本 是 
1.8.3.2 ): 





yit version 1.8.3,.2 


AMOAO Terminal — bash — 78x8 


Last login: Sun Aug 25 16:42:13 on ttys000 

Azats-Air:~ azat$ git config --global user.name "John Doe” 
| 
Azats-Air:~ azat$ git version 


git version 1.8.3.2 
Azats-Air:~ azat$ 





设置 和 测试 Git 的 安装 


本 书 稍 后 会 介绍 如 何 生 成 SSH 密 钥 并 把 它们 上 传 到 SaaS/PaaS 网 站 。 

















2.1.5 本 地 HTTP 服 务 器 


尽管 在 没有 本 地 HTTP 服务 器 的 情况 下 依然 可 以 完成 大 多 前 端 开 发 , 但 在 使 用 HTTP 请 求 和 
AJAX 调 用 加 载 文件 时 ， 本 地 HTTP 服务 器 是 必 不 可 少 的 。 而 且 ， 通 常情 况 下 使 用 本 地 HTTP 服 
务 器 是 非常 不 错 的 做 法 。 这 种 情况 下 ,你 的 开发 环境 和 生产 环境 很 接近 。 你 也 许 需 要 下 面 这 些 通 
过 Apache Web 服务 器 修改 出 来 的 软件 。 






































口 MAMP": 可 以 在 MacOSX 上 使 用 的 Mac、Apache、MySQL 以 及 PHP 个 人 Web 服务 器 。 
口 MAMP Stack”: BitNami (苹果 应 用 商店 ”) 研发 的 一 个 Mac 应 用 ， 包 含 PHP 、Apache、 
MySQL 和 phpMyAdmin 套件 。 

口 XAMPP”: Apache 发 布 的 包含 MySQL 、PHP 和 Perl 的 工具 , 支持 Windows、Mac、Linux 
和 Solaris。 
































GD http:/wwwmamp.info/en/index.html 

© http://bitnami.com/stack/mamp 

© https://itunes.apple.com/es/app/mamp-stack/id571310406?l=en 
(@ http://www.apachefriends.org/en/xampp.html 
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Ip PRO- Co re ed psmder 
一 一 一 一 一 加 MO 
Se 
Ts 
me ee ee! lk 
rr ” me ~ | hm Ma I Ie rm 
Mac 版 MAMP 主页 


MAMP 、MAMP Stack 和 XAMPP 都 拥有 直观 的 图 形 用 户 界面 (GUI )， 可 以 通过 它们 来 修改 
配置 和 主机 文件 设置 。 





注意 
@ Node.js 和 其 他 很 多 后 端 技术 一 样 ， 拥 有 自己 的 用 于 开发 环境 的 服务 器 。 


2.1.6 ”数据 库 : MongoDB 


下 面 的 步骤 更 适合 基于 Mac OS 义 或 者 Linux 的 系统 ， 但 经 过 修改 也 可 用 于 Windows 系统 ， 
即 修改 第 (3) 步 里 的 SPATH 变量 。 接 下 来 , 我 们 将 详细 描述 如 何 使 用 官方 安装 包 来 安装 MongoDB， 
因为 我 们 发 现 这 种 方法 更 健壮 ， 引 入 的 冲突 也 更 少 。 当 然 ， 还 有 很 多 其 他 在 Mac 以 及 其 他 系统 ” 
上 安装 的 方式 ”， 例 如 使 用 Brew。 


(1) 可 以 从 http:/www.mongodb.org/downloads 下 载 MongoDB ,最 新 的 苹果 笔记 本 , 像 MacBook 
Air， 可 以 选择 OS X 64-bit 版本。 老 版 本 的 Mac 可 以 查看 链接 : http://dl.mongodb.org/dl/osx/i386。 











提示 
可 以 通过 输入 命令 $ uname -p 查看 你 的 电脑 处 理 器 是 什么 架构 体系 。 





GD http://docs.mongodb.org/manual/installation/ 
© http:/docs.mongodb.org/manualtutorialinstall-mongodb-on-os-x/ 
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O) 将 下 载 的 文件 解压 到 你 的 Web 开发 目录 中 (~/Documents/Development 或 其 他 地 方 )， 也 可 


以 安装 MongoDB 到 /usr/local/mongodb 目录 。 
(3) 可 选 的 步骤 : 如 果 你 想 在 系统 的 任何 位 置 访问 MongoDB 命令 ， 需 要 把 mongodb 路 径 加 
到 $PATH 变量 里 。 在 Mac OS X 中 打开 paths 路 径 需 使 用 命令 : 








sudo vi /etc/paths 


或 者 使 用 TextMate 打开 : 
mate /etc/paths 


巴 下 面 的 命令 加 到 /etc/patnhs 文件 里 : 














a 





/usr/local/mongodb/bin 
(4) 创建 数据 目录 。 默 认 情 况 下 ,MongoDB 使 用 /qata/gb 作为 数据 目录 。 新 版 本 的 MongoDB 
可 能 会 有 所 不 同 。 创 建 这 个 目录 ， 可 以 使 用 下 面 的 命令 : 





$ sudo mkdir -p /data/db 
$ sudo chown ‘id -u /data/db 


向 站 让 Terminal 一 bash 一 79x6 


Last login: Sun Aug 25 17:28:35 on ttys000 
Azats-Air:~ azat$ sudo mkdir /data/db 
Azats-Air:~ azat$ sudo chown “id -u™ /data/db 


Azats-Air:~ azat$ 











初始 化 设置 MongoDB: 创建 数据 目录 
如 果 你 不 喜欢 使 用 /datay/dpb 而 是 希望 指定 一 个 目录 ， 可 以 通过 mongod 的 --dbpath 参数 来 指 
定 (MongoDB 主要 服务 )。 
(5) 进入 解压 MongoDB 的 目录 。 这 个 目录 中 会 有 一 个 bin 目录， 我 们 在 终端 里 使 用 下 面 的 


命令 ; 














地 


$ ./bin/mongod 
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@MA Terminal — mongod 一 122x30 


二 


2 17:31:00 worming: 32-bit servers don't hove journaling enabled by defoult, Pleose use --journol if you wont dur 


[initondlisten] MongoD0B storting : pid»738 portn27817 dopath=/data/db/ 32-bit hostmAzats-Air,local 
[initondiisten] 
[imitondlisten] * NOTE: This is a development version (2.3.0) of MongoDB 
[| Not recomended for production. 
[initonditsten] 
[initoandiisten] : This is 9 32 bit Mongo06 binory. 
[initoandiisten] 32 bit builds are limited to less thon 2G8 of doto (or less with -~-journol). 
[initondlisten] Note that journaling defoults to off for 32 bit and is currently off. 
See http://wm™.mongodb .org/disploy/DOCS/32+bit 


WU 


9 WARNING: soft rlimits too lon. Maber of files is 256, should be oat least 1000 
:00 [initoanditisten] 
[initoandiisten] db version v2.3.0，pdfite version 4.5 
[initondiisten] git version: 86d6c3b316do2fffcl1001e665442bo679b51fd26 
:31: :的 [initondlisten] build info: Dorwin bs-osx-106-t386-1.1ocot 10.8.0 Dorwin Kernel Version 10.8.0: Tue ju 
PDT 2011; root:xnu-1504.15, -VRELEASE. 1386 1386 8B005T_LIB_VERSION-1 49 


Be 
NNWNNNNNNNNNNNNNNNN 


WUWOUMUUMUVUU 


:31: :00 [initondiisten] Uncbte to check for journal files de to: boost::filesysten: ;directory_iterotor; ;Const 
file or directory: "/dota/db/journal”" 
:3 
:3 


So 


~ 
vu 


1:00 [websvr] odmin web console woiting for conmections on port 28017 
1:00 [initondlisten] woiting for connections on port 27917 


Sun 
obi 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
Sun 
n 

Sun 
Sun 
PWUC 
Sun 
Sun 





启动 MongoDB 服务 器 
(6) 如 果 你 看 到 类 似 下 面 的 输出 


MongoDB starting: pid = 7218 port=27017... 


这 意味 着 MongoDB 数据 库 服务 右 已 经 启动 了 。 默 认 情 况 下 ， 它 监听 http://localhost:27017。 
如 果 你 用 浏览 器 打开 http://localhost:28017, 那么 可 以 看 到 版 本 号 、 日 志 及 其 他 有 用 的 信息 。 在 这 
个 例子 里 MongoDB 服务 器 使 用 了 两 个 不 同 的 端口 (27017 和 28017 ): 一 个 是 主 (本 机 ) 端口 ， 
用 来 和 别 的 应 用 交换 数据 ， 另 一 个 是 基于 Web 的 图 形 用 户 界 面 ， 用 来 监控 Web 界面 /统计 数据 。 
在 Nodejs 代码 里 只 需要 使 用 27017。 


注意 
@ 修改 $PATH 交 量 后 不 要 忘记 重新 启动 终 


现在 ,更 进一步 , 需要 测试 我 们 是 否 可 以 访问 MongoDB 控制 台 /shell， 它 将 作为 这 个 服务 右 
的 一 个 客户 端 。 为 此 ， 我 们 需要 保持 运行 服务 器 的 终端 窗口 处 于 打开 状态 。 


(1) 在 相同 的 目录 里 男 开 一 个 终端 窗口 ， 并 且 执 行 : 
















































































$ ./bin/mongo 


你 应 该 会 看 到 类 似 这 样 的 输出 :“MongoDB shell version 2.0.6 ..….”。 


(2) 然后 输入 并 且 执 行 : 
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> db.test.save({a:1}) 
> db.test.find() 


如 果 看 到 添加 的 记录 能 被 再 次 查询 出 来 ， 就 证 明 一 切 正 常 : 

















T=). 








全 门人 A Terminal — mongo — 79x14 


Last login: Sun Aug 25 17:30:33 on ttys000 
Azats-Air:~ azat$ mongo 

MongoDB shell version: 2.3.0 

Connecting to: test 

Welcome to the MongoDB shell. 

For interactive help, type "help". 

For more comprehensive documentation, see 


http://docs .mongodb .org/ 
Questions? Try the support group 
http://groups .google. com/group/mongodb-user 
> db.test.save( { a: 1} ) 
> db.test.findO 
{ "_id”: ObjectId("5210169d6421d0d4d6f3198f"), "a" : 1} 
> 





运行 MongoDB 客户 端 并 且 保 存 数据 
find 和 save 命令 做 的 事情 和 你 想 让 它们 做 的 事情 一 致 。 


更 详细 的 介绍 可 以 在 MongoDB.net 查阅 : Install MongoDB on OS X"。Windows 用 户 可 以 阅 
读 这 篇 文章 : Installing MongoDB”。 








注意 
@ MAMP 和 XAMPP 包含 的 是 MySQL ， 它 是 开源 的 传统 SQL 数据 库 ; 
phpMyAdmin 是 MySQL 数据 库 的 Web 管理 应 用 。 


注意 

@ 在 MacOSX 和 大 部 分 Unix 系统 中 ， 可 以 使 用 control + c 关闭 进程 。 如 果 
使 用 control + z， 进程 会 休眠 (或 退出 终端 窗口 )。 这 种 情况 下 ， 数 据 文 件 
会 有 一 个 锁 文 件 ， 你 必须 通过 kil11 命令 或 者 活动 监视 器 来 关闭 进程 ， 然 后 手 
工 删除 数据 文件 夹 里 的 锁 文件 。 在 Mac 终端 里 cormanad + .和 control + c 
的 效果 是 一 样 的 。 





2.1.7 ”其 他 组 件 
1. Node.js 安装 


从 http://modejs.org/#download 下 载 Node.js, 参见 下 面 的 截图 。 安装 非常 简单 :下载 压缩 文件 ， 











QD http://docs.mongodb.org/manual/tutorial/install-mongodb-on-0s-x/ 
© http:/www.tuanleaded.com/blog/2011/10/installing-mongodb/ 
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运行 * .pkg 安装 器 。 检 查 Node.js 的 安装 ， 可 以 使 用 下 面 的 命令 : 
$ node -v 

正常 情况 下 会 看 到 类 似 下 面 的 信息 (你 的 版 本 有 可 能 不 太一 样 ) : 
v0.8.1 


Node.js 包含 了 NPM ( Node 包 管 理 器 "” )， 我 们 会 经 常 使 用 NPM 来 安装 Node.js 模块 。 











Node.js 主页 





2. JS 库 

前 端 JS 库 一 般 从 它们 的 网 站 上 下 载 并 解压 到 开发 目录 里 (如 /Documents/Development )， 以 
备 将 来 使 用 。 它 们 经 常会 有 压缩 过 的 用 于 生产 环境 的 版 本 ( 更 多 相关 信息 请 参见 4.6 节 ) 和 有 大 
量 详细 注释 的 用 于 开发 环境 的 版 本 。 

男 一 个 办 法 是 直接 使 用 开放 的 CDN 服务 , 例如 Google Hosted Libraries2 、CDNJS”、Microsoft 
Ajax Content Delivery Network”， 等 等 。 使 用 这 个 办 法 后 ， 一 些 用 户 使 用 应 用 时 速度 会 快 一 些 ， 
但 是 如 果 没 有 网 络 ， 应 用 是 完全 不 可 用 的 。 


下 面 是 一 些 常 用 的 前 端 JS 库 及 它们 的 网 址 。 














GD https:/npmjs.org 

© https://developers.google.com/speed/libraries/devguide 
© http://cdnjs.com/ 

@ http://www.asp.net/ajaxlibrary/cdn.ashx 
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口 LESS 是 一 个 前 端 解 释 器 ， 从 lesscss.org 获取 。 你 可 以 解压 它 到 你 的 开发 目录 
(~/Documents/Development ) 或 者 其 他 地 方 。 

口 Twitter Bootstrap 是 一 个 CSS/LESS 框架 ， 可 以 从 twitter.github.com/bootstrap 获取 。 

口 jQuery 可 以 从 jquery.com 获取 。 

口 Backbone.js 可 以 从 backbonejs.org 获取 。 

口 Underscore.js 可 以 从 underscorejs.org 获取 。 

口 Require.js 可 以 从 requirejs.org 获取 。 





3. LESS App 


LESS App 是 Mac OS X 上 的 应 用 ， 它 可 以 实时 编译 LESS 文件 到 CSS， 可 以 从 incident57. 
com/less 获取 。 








eased 1.4.0.Thia 四 chadea new featurea such aa extenda the data ari function and more meatha 
the changelog for a full list of changes 





LESS App 首页 





2.2 云端 环境 搭建 


2.2.1 SSH 密 钥 





使 用 SSH 密 钥 可 以 安全 连接 到 服务 器 ， 而 不 需要 每 次 都 输入 用 户 名 和 密码 。 对 于 GitHub 上 
的 仓库 ， 后 一 种 登录 方式 使 用 的 是 HTTPS URL， 比 如 https://github.com/azat-co/rpjs.git， 前 一 种 
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方式 使 用 的 是 SSH URL， 比 如 git@github.com:azat-co/rpjs.git。 


在 Mac OS 义 或 Unix 操作 系统 上 产生 SSH 密 钥 可 以 按照 下 面 的 步骤 操作 。 


(1) 检查 已 经 存在 的 SSH 密 钥 


$ cd ~/.ssh 
$ ls -lah 


(2) 如 果 你 看 到 有 文件 名 字 类 似 id_rsa (参考 
移 到 备份 目录 里 : 

















$ mkdir key_backup 
$ cp id rsa* key_ backup 
$s rm id rsa* 


截图 )， 删 除 





除 它 们 ， 或 者 使 用 下 面 的 命令 把 它们 


(3) 使 用 ssh-keygen 命令 生成 一 对 新 的 SSH 密 钥 ， 假 设 在 ~/.ssh 目录 : 








$ ssh-keygen -t rsa -C 


(4) 回 答 它 提出 的 问题 





$ pbcopy < ~/.ssh/idq_rsa.pub 


AMA 


Azats-Air:~ azat$ ssh-keygen -t rsa -C "johny@exaomple.com” 
Generoting pubiic/privote rsa key poir， 


Enter file in which to save the key (/Users/azat/.ssh/id_rsa): 


Creocted 由 rectory “〈“/Users/azot/ .ssh' 
Enter passphrase (empty for no passphrase): 
Enter some passphrase ogain: 


Your identification has been saved in /Users/azat/,ssh/id_rsa,. 
Your public key has been saved in /Users/azat/.ssh/id_rso.pub. 


The key fingerprint is: 
df:08:f9:00:0c:87:ed:e8:38:33:92:11:54:c3:bb:0f johnyeexample 
The key's rondomort imoge is: 

+--[ RSA 2048]----+ 


:~ azot$ open id_rsa.pub 
The file rs/azat/id_rsa.pub does not exist,. 
Azots-Air:~ azat$ open ~/.ssh/id_rsa.pub 
No opplication knows how to open /Users/azot/,.ssh/id_rsa.pub. 
Azats-Air:~ azat$ pbcopy < ~/.ssh/id_rsa.pub 
Azats-Air:~ azat$ 


虹 





生成 SSH RSA 密 钥 并 且 








(5) 或 者 使 用 系 台 


$ open id rsa.pub 
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题 ， 最 好 保持 默认 的 名 字 id_rsa， 


.Com 





"your_email@youremail .com" 


然后 复制 id_rsa.pub 里 的 内 容 : 





Terminal — bash — 105x28 





复制 公 钥 到 剪 切 板 





默认 的 编辑 器 打开 id_rsa.pub 文件 : 
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(6) 也 可 以 使 用 TextMate: 


$ mate id rsa.pub 


2.2.2 GitHub 


(1) 复制 公 钥 后 , 打开 并 登录 github.com, 打开 账户 设置 , 选择 “SSH key” 人 然后 添加 新 的 SSH 
密 钥 。 添 加 一 个 名 字 ， 比 如 你 的 电脑 名 称 ， 然 后 粘贴 复制 的 公 乌 。 


(2) 检查 是 否 可 以 通过 SSH 连接 到 GitHub， 输 入 并 执行 下 面 的 命令 : 


























$ ssh -T git@github.com 
如 果 看 到 类 似 下 面 的 内 容 : 


Hi your-GitHub-username! You've successfully authenticated, but GitHub does not 








provide shell access. 
说 明 已 经 设置 好 了 。 

(3) 第 一 次 连接 到 GitHub 时 会 收 到 一 个 “authenticityofhost...can’t be established” 提 醒 。 对 于 
这 个 提示 不 用 困惑 ， 像 下 面 的 截图 那样 输入 “yes” 就 行 了 。 

















AMA Terminal 一 bash — 96x13 


Last login: Sun Aug 25 18:47:31 on ttys000 

Azats-Air:~ azat$ ssh -T gitegithub .com 

The authenticity of host ‘github.com (204.232.175.90)" can't be established. 

RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48, 

Are you sure you want to continue connecting (yes/no)? yes 

Warning: Permanently added “github ,com,204.232.175.99”′ (RSA) to the list of known hosts. 
Identity added: /Users/azat/.ssh/id_rsa (/Users/azat/.ssh/id_rsa) 


Hi alex-d3v! You've successfully authenticated, but GitHub does not provide shell access. 
Azats-Air:~ azat$ 





首次 测试 SSH 连接 到 GitHub 


如 果 展 示 的 不 是 类 似 的 信息 ， 请 重复 上 一 节 内 容 里 的 步 又 (3)~ 步 又 (4)， 然 后 在 GitHub 上 更 
新 产生 的 *.pub 文件 里 的 内 容 。 











an 














警告 
人 保护 你 的 id_rsa 隐私 ， 不 要 把 它 共享 给 任何 人 。 
更 多 说 明 可 以 在 GitHub 上 找到 : Generation SSH Keys ( 生成 SSH 密 钥 ) ”。 





GD https://help.github.com/articles/generating-ssh-keys 
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Windows 用 户 可 以 在 [PuTTY] 里 找到 生成 SSH 密 钥 的 功能 。 


2.2.3 Windows Azure 
下 面 是 设置 Windows Azure 账户 的 步 又。 
(1) 使 用 Windows Azure 网 站 和 虚拟 机 预览 需要 注册 。 目 前 ， 它 们 有 90 天 的 免费 试用 期 : 2 


https://www.windowsazure.com/en-uso 
(2) 启用 Git 部署， 并 且 创 建 用 户 名 和 和 密码， 然后 上 传 SSH 公 钥 到 Windows Azure。 
(3) 安装 Node.js SDK， 它 可 以 从 https://www.windowsazure.com/en-us/develop/nodejs/ 获 取 。 
(4) 检 查 安 装 类 型 ; 
$ azure -Vv 
正常 情况 下 你 会 看 到 下 面 的 输出 : 
Windows Azure: Microsoft's Cloud Platform... Tool Version 0.6.0 


(5) 登录 Windows Azure 网 站 ， 网 址 是 https://windows.azure.com。 


中 Windows Azure 


About you 


Mobile verification 
rd Sie eH ' 
Payment information 


Agreement 





在 Windows Azure 上 注册 


(6) 选择 “New”， 然 后 选择 “Web Site” 和 “Quick Create”。 输 入 你 期 望 使 用 的 网 址 ， 然 后 
点 击 “OK”, 
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(7) 到 新 创建 的 网 站 的 控制 面板 ， 选 择 “Set up Git publishing”。 然 后 ， 你 需要 输入 用 户 名 和 
密码 。 这 个 操作 会 应 用 到 你 的 所 有 网 站 上 ,， 它 意味 着 所 有 你 创建 的 网 站 都 不 需要 设 定 凭 据 。 点 击 
“OK”, 

(8) 接 下 来 ， 它 会 要 求 你 填 入 一 个 Git URL， 比 如 : 








https://azatazureQ@azat.scm.azurewebsites.net/azat.git 
接 下 来 是 如 何 部 署 ， 本 书后 面 的 章节 会 有 讲解 。 
(9) 高 级 用 户 选项 : 按照 下 面 的 这 个 教程 创建 一 个 虚拟 机 ， 并 且 在 它 上 面 安装 MongoDB : 


Install MongoDB on a virtual machine running CentOS Linux in Windows Azure” 。 




















2.2.4 Heroku 


Heroku( http://www.heroku.com ) 是 多 语言 敏捷 应 用 部 署 的 平台 。 它 工 作 方式 类 似 于 Windows 
Azure， 也 可 以 通过 Git 部 署 应 用 。 不 需要 为 MongoDB 安装 虚拟 机 ， 因 为 它 有 MongoHQ 扩展 ”。 


我 们 可 以 按照 下 面 的 步骤 设置 Heroku。 


(1) 在 http://heroku.com 注册 。 当 前 他 们 有 免费 用 户 ,使 用 时 所 有 的 选项 都 应 选 最 小 的 (0 )， 
数据 库 选 择 共 享 。 

(2) 在 https://toolbelt.heroku.com 下 载 Heroku Toolbelt。 它 是 一 个 工具 包 , 包含 Heroku 拥有 的 
库 、Git 和 Foremanm 等 。 老 版 本 的 Mac 用 户 可 以 直接 使 用 这 个 客户 端 "。 如 果 你 使 用 别 的 操作 系 
统 ， 请 浏览 Hero Client GitHub”。 

(3) 安装 完成 后 ， 应 该 可 以 使 用 heroku 命令 。 检 查 一 下 ， 并 日 登录 Heroku， 输 入 : 






























































$ heroku login 


它 会 要 求 输入 Heroku 用 户 名 和 密码 ， 如 果 你 已 经 创建 了 SSH 密 钥 , 它 会 自动 上 传 到 Heroku 
的 网 站 。 





GD https://social.msdn.microsoft.com/Forums/en-US/61014ef6-fd71-4aef-a02d-aa0182523fb3/install-mongodb-on-a-virtual- 
Imachine-running-centos-linux-in-windows-azure?forum=WAVirtualMachinesforWindows 

© https://addons.heroku.com/mongohq 

©@® https://github.com/ddollar/foreman 

(@ http://assets.heroku.com/heroku-client/heroku-client.tgz 

G) https://github.com/heroku/heroku 
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AMOA Terminal 一 bash 一 86x14 


Last login: Sun Aug 25 21:04:33 on ttys000 
Azats-Air:~ azat$ cd ~/Downloads/heroku-ciient/bin 
Azats-Air:bin azat$ ./heroku login 
[205 

Email: alex.m4il .box@gmail .com 

Password (typing will be hidden): 

Authentication successful. 


Azats-Air:bin azat$ 








成 功 使 用 了 $s heroku login 命令 的 响应 





(4) 如 果 一 切 正常 ， 在 特定 的 目录 创建 一 个 Heroku 应 用 ， 执 行 下 面 的 命令 : 
$ heroku create 


更 多 步骤 操作 请 参见 Heroku: Quickstart" 和 Node.js”。 


2.2.5 Cloud9 

Cloud9 是 一 个 在 浏览 器 里 运行 的 IDE, 绑 定 GitHub 或 者 BitBucket 账户 后 , 它 可 以 用 于 浏览 、 
编辑 你 的 仓库 ， 并 且 部 署 到 Windows Azure 或 者 其 他 的 服务 。 它 不 需要 安装 ， 所 有 的 东西 都 在 浏 
览 磊 里 工作 ， 和 Google Docs 很 类 似 。 























GD https://deveenter.heroku.com/articles/quickstart 
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第 3 章 
jQuery 和 Parse.com 








提要 : 简 述 jQuery 的 主要 子 数 ，Twitter Bootstrap 支架 ( scaffolding )， 以 及 主要 的 LESS 组 
件 ; JSON、AJAX 和 CORS 的 定义 ; 在 Twitter REST API 示例 上 演示 JSONP 调用 ; 详解 如 何 使 
用 jQuery 和 Parse.com 构建 纯 Chat 前 端 应 用 ; 逐步 介绍 如 何 部 署 到 Heroku 和 Windows Azure。 
世上 有 两 种 软件 设计 方法 ,一 种 是 设计 得 尽量 简单 , 以 至 于 明显 没有 什么 缺陷 ，; 
， 另外 一 种 是 使 它 尽量 得 复杂 ， 以 至 于 其 缺陷 不 那么 明显 。 第 一 种 方式 更 难 。 


3.1.1 JSON 
这 是 从 json.org” 摘 抄 的 关于 JSON 的 定义 : 


JSON ( JavaScript Object Notation ) 是 一 种 轻 量 级 的 数据 交换 格式 ， 易 于 人 类 读 写 ， 
也 易于 机 器 解析 和 生成 。 它 的 产生 是 基于 JavaScript 编程 语言 (1999 年 12 月 ,标准 
ECMA-262， 第 3 版 ? ) 的 一 个 子 集 。JSON 采用 完全 独立 于 语言 的 文本 格式 ， 但 是 也 采 
用 了 为 编程 人 员 所 熟知 的 C 语言 家 族 ( 包括 C、C++、C#、 Java、 JavaScript、 Perl、 Python 
等 ) 的 约定 。 这 些 特 性 使 JSON 成 为 理想 的 数据 交换 语言 。 
JSON 已 经 成 为 Web 和 移动 应 用 不 同 组 件 间 、 同 第 三 方 服务 间 数 据 交换 的 标准 格式 。 在 应 用 
内 部 ，JSON 也 是 广泛 使 用 的 格式 ， 它 可 以 用 来 存储 设置 信息 、 本 地 化 、 翻 译文 件 或 其 他 数据 。 
JSON 对 象 一 般 是 这 样 的 : 
{ 


"aLUe OE 吉 光 7 


























GD http://en.wikipedia.org/wiki/Charles_ Antony_ Richard Hoare 
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"b": "value of b" 
} 


这 里 定义 了 一 个 包含 键 - 值 对 的 对 象 。 键 和 值 分 别 位 于 “:” 号 两 边 。 在 计算 机 科学 术语 中 ， 
JSON 等 同 于 散 列 表 ， 即 一 个 用 键 值 标识 的 列表 或 关联 数组 ,具体 叫 什么 取决 特定 的 语言 。JSON 
和 JS 对 象 字 面 上 最 大 的 区 别 在 于 JSON 更 严格 ,必须 使 用 “ 双 引 号 ” 包 右 键 和 字符 串 值 。 这 两 
种 类 型 都 可 以 使 用 JsoN. stzingify() 序 列 化 成 一 个 字符 串 ， 使 用 JSON .parse () 反 序列 化 一 
个 有 效 的 JSON 对 象 字符 串 。 


大 家 应 该 记得 一 个 对 象 的 成 员 可 以 是 数组 、 数 字 或 者 其 他 对 象 ， 比 如 : 


{ 
oa 
"title": "Get your mind in shape!", 
"votes": 9, 
"comments": ["nice!", "good link"]J 
je 
"title": "Yet another post", 
"votes": 0, 
"comments": [J] 


} 

















Ya 
"totalPost"s 2, 
"getData": function() { 
return new Data() .getDate(); 
} 
} 
上 面 的 例子 里 ， 这 个 对 象 拥 有 posts 属性 。posts 的 值 是 一 个 对 象 数 组 ， 它 里 面 的 每 一 个 
对 象 包含 键 title、votes 以 及 comments。votes 属性 是 一 个 数值 原始 值 ，comments 是 字符 


串 数组 。 我 们 也 可 以 将 函数 作为 值 使 用 , 这 里 getpata 的 值 就 是 一 个 函数 ,这 里 我 们 叫 它 方法 。 


JSON 与 XML 或 者 其 他 数据 格式 相 比 ， 更 加 灵活 、 简 洁 ，“JSON: The Fat-Free Alternative to 
XML” 这 篇 文章 对 此 有 详细 介绍 .MongoDB 使 用 了 一 种 类 似 JSON 的 格式 叫 BSON?” ,也 叫 Binary 
JSON。 第 6 章 有 更 多 关于 BSON 的 介绍 。 























3.1.2 AJAX 


AJAX 即 异 步 JavaScript 和 XML， 它 通过 在 客户 端 (浏览 器 端 ) 使 用 XMLHttpRequest 对 象 
与 服务 器 交换 数据 。 虽 然 XML 很 有 名 ， 但 目前 并 不 那么 常用 了 ， 通 常 使 用 的 是 JSON。 这 也 是 
现在 开发 者 一 般 不 再 说 AJAX 的 原因 。 记 住 , 你 也 可 以 同步 发 HTTP 请 求 , 但 这 样 做 并 不 好 。 最 
常见 的 同步 请 求 应 该 是 内 联 script 标签 。 
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3.1.3 ” 跨 域 调用 


出 于 安全 原因 , XMLHTTPRequest 对 象 最 初 的 实现 不 允许 跨 域 操作 , 即 : 客户 端 代码 和 服务 
器 端 代码 在 不 同 的 域 中 时 。 我 们 有 很 多 方法 来 应 对 这 个 问题 。 


一 种 常用 的 方法 是 使 用 JSONP? ( 带 填充 和 前 级 的 JSON )， 本 质 上 它 是 通过 DOM 操作 动态 
生成 的 一 个 script 标签 。script 标签 不 受 同 一 域 限制 。JSONP 请 求 在 请 求 查询 字符 串 中 包含 回调 
函数 名 。 比 如 ，jQuery .ajax() 函数 动态 生成 唯一 的 函数 名 ， 然 后 附加 到 请 求 里 (为 了 方便 阅 
读 ， 下 面 本 来 显示 为 一 行 的 字符 串 被 换行 了 ): 



































http://graph.facebook.com/search 
?type=post 
&limit=20 
&q=Gatsby 
&callback=jQuery16207184716751798987_1368412972614&_=1368412984735 


第 二 种 方法 是 使 用 CORS”( Cross-Origin Resource Sharing， 跨 域 资源 共享 )， 这 是 一 种 更 好 
的 解决 方案 ,但 是 依赖 服务 器 端的 控制 修改 响应 头 。Chat 示例 应 用 的 最 终 版 本 将 会 使 用 这 种 方案 。 


CORS 服务 器 响应 头 的 示例 : 

















Access-Control-Allow-Origin: * 


更 多 关于 CORS 的 内 容 : Enable CORS 的 内 容 和 HTML5 Rocks Tutorials 网 站 上 的 “Using 
CORS””， 可 以 通过 test-cors.ore 测试 CORS 。 


3.2 jQuery 


本 书 中 我 们 都 会 使 用 jQuery ( http://jquery.com ) 进行 DOM 操作 、HTTP 请 求 和 JSONP 调用 。 
jQuery 已 成 为 事实 上 的 标准 ， 因 为 它 的 $ 对 象 /函数 提供 了 一 种 非常 简便 方式 ， 用 以 通过 ID 、 类 、 
标签 名 、 属 性 值 、 结 构 或 者 它们 的 组 合 来 访问 页 面 中 任何 DOM 元 素 。 选 择 需 语法 和 CSS 很 像 ， 
可 以 使 用 # 作 为 ID 选择 ，. 作 为 类 选择 ， 比 如 : 

$s("#main") .hide(); 


$s("p.large") .attr("style","color:red"); 
$s("#main") .Show() .html ("<div>new div</div>"); 


下 面 是 一 些 常用 的 jQuery API 函数 。 


























QD http://en.wikipedia.org/wiki/JSONP 

© http:/www.w3.0rg/TR/cors/ 

© http://enable-cors.org/resources.html 

@ http://www.html$Srocks.com/en/tutorials/cors/ 
©) http://client.cors-api.appspot.com/client 
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口 phtml 
口 append ( ) 
口 brepend () 


口 off( 


口 css 


()”: 选择 由 提供 的 选择 器 字 符 串 找到 的 元 素 。 
()”: 如 果 一 个 元 素 可 见 ， 隐 藏 它 。 

口 et) 如 果 一 个 元 素 隐 藏 起 来 了 ， 显 示 它 。 
0O™ TM 





: 在 特定 的 元 素 后 插入 一 个 元 素 。 








”; 在 特定 的 元 素 之 前 插入 一 个 元 素 。 
口 on ()”: 添加 监听 器 到 元 素 上 。 

“: 删除 元 素 上 的 监听 器 。 

”: 获取 或 设置 一 个 元 素 的 样式 属性 。 











DQ attr 
DQ vall 

口 text 
DQ each 





(小 
(个 
(0 
()® 
() 
() 


一 组 的 每 一 个 元 素 上 。 





jQuery 也 拥有 大 量 的 插件 和 库 ， 例 如 jQuery UI 和 jQuery Mobile®， 


其 他 功能 。 


": 获取 或 设置 一 个 元 素 的 任何 属性 
: 获取 或 设置 一 个 元 素 的 value 属性 。 

) 2: 获取 一 个 元 素 和 它 包 含 的 元 素 的 文本 。 

) 3: 遍历 一 组 元 素 。 


大 多 数 的 jQuery 函数 不 是 只 作用 于 一 个 元 素 上 ， 如 果 调 用 它 的 是 一 组 元 素 ， 它 会 作用 于 这 
这 有 时 候 会 引发 错误 ， 特 别 是 当选 择 需 的 范围 太 广 的 时 候 。 






































3.3 Twitter Bootstrap 





它们 提供 了 大 量 UI 和 


Twitter Bootstrap 是 一 些 CSS 、LESS 和 JavaScript 插 件 的 集合 ， 可 用 于 创建 用 户 界面 ， 而 不 





GD http://api.jquery/find 


© http://api.jquery/hide 
@® http://api.jquery/show 
(@ http://api.jquery/html 
(©) http://api.jquery/append 


© http://api.jquery/prepend 


© http://api.jquery/on 
http://api.jquery/off 
© http://api.jquery/css 
(0 http://api.jquery/attr 
DD http://api.jquery/val 
@D http://api.jquery/text 


(3 http://api.jquery/each 


(@ http://jqueryui.com/ 
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{8 





需要 花费 时 间 在 诸如 圆 角 按钮 、 兼 容 性 和 响应 式 等 细节 上 。 它 可 以 快速 帮 你 实现 想法 , 构建 原型 。 
由 于 它 的 可 定制 性 ，Twitter Bootstrap 也 可 非常 适合 用 于 正式 的 项 目 。 源 代码 是 用 LESS "写成 的 ， 
纯 CSS 也 可 以 下 载 并 且 正 常 使 用 。 


下 面 是 一 个 使 用 Twitter Bootstrap 支架 的 简单 例子 。 项 目的 文件 结构 如 下 所 示 : 











/bootstrap 
-index.html 
/css 
-bootstrap.min.css 
(other files if needed) 
/img 
glyphicons-halflings.png 
(other files if needed) 


首先 我 们 使 用 正确 的 标签 创建 index.html: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 





</head> 

<body> 

</body> 
</html> 


引入 压缩 过 的 Twitter Bootstrap 的 CSS 文件 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link 
type="text/css" 
rel="stylesheet" 
href="css/bootstrap.min.css" /> 
</head> 
<body> 
</body> 
< 


添加 container-fluid 和 row-fluid 类 ， 
<body > 


<div class="container-fluid"> 
<div class="row-fluid"> 





</div> <!-- row-fluid --> 
</div> <!-- container-fluid --> 
</body> 
QD http://lesscss.org/ 
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Twitter Bootstrap 使 用 的 是 12 列 网 格 。 指 定 某 个 元 素 的 宽度 时 可 以 使 用 spanN 类 ， 比 如 : 
“span1”“span2”...“span12”。 同样 也 有 用 于 向 右 移动 的 类 offsetN, 比如 : “offsetl” “offset2”... 
“offset12”。 完 整 的 参考 信息 : http://twitter.github.com/bootstrap/scaffolding.html。 


我 们 为 主 内 容 区 块 使 用 span12 和 hero-unit 类 : 


<div class="row-fluid"> 
<div class="spanl2"> 
<div id="content"> 
<div class="row-fluid"> 
<div class="spanl2"> 
<div class="hero-unit"> 
<h1> 
Welcome to Super 
Simple Backbone 
Starter Kit 
</hil> 
<p> 





This is your home page. 
To edit it just modify 
<i>index.html</i> file! 
</p> 
“D> 
<a 
class="btn btn-primary btn-large" 
href="http://twitter.github.com/bootstrap" 
target="_blank"> 
Learn more 


</a> 
</p> 
</div> <!-- hero-unit --> 
</div> <!-- span12 --> 
</div> <!-- row-fluid --> 
</div> <!-- content --> 
</div> <!-- spanl2 --> 
</div> <!-- row-fluid --> 


完整 的 index.html 源码 可 以 从 rpjs/bootstrap 获取: 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<link 
type="text/css" 
rel="stylesheet" 
href="css/bootstrap.min.css" /> 
</head> 
<body> 
<div class="container-fluid"> 





GD https://github.com/azat-co/rpjs/tree/master/bootstrap 
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<div class="row-fluid"> 
<div class="spanl2"> 
<div id="content"> 
<div class="row-fluid"> 
<div class="spanl2"> 
<div class="hero-unit"> 
<h1l> 
Welcome to Super 
Simple Backbone 
Starter Kit 
</hil> 
<p> 
This is your home page. 
To edit it just modify 
<i>index.html</i> file! 
</B> 
<p> 
<a 
class="btn btn-primary btn-large" 
href="http://twitter.github.com/bootstrap" 
target="_blank"> 
Learn more 


</a> 
ei 
</div> <!-- hero-unit --> 
</div> <!-- span12 --> 
</div> <!-- row-fluid --> 
</div> <!-- content --> 
</div> <!-- spanl2 --> 
</div> <!-- row-fluid --> 
</div> <!-- container-fluid--> 
</body> 
</html> 





示例 的 源码 可 以 从 GitHub 公共 仓库 下 载 或 者 拉 取 ， 它 在 github.com/azat-co/rpjs 的 rpjs/ 
bootstrap 目录 ?中 。 
其 他 有 用 的 工具 一 一 CSS 框 光 和 CSS 预 处 理 器 ， 如 下 所 示 。 


口 Compass”: CSS 框架 。 
口 SASS”: 类 似 LESS，CSS3 扩展 。 
口 Blueprint”: CSS 框架 。 








GD http://github.com/azat-co/rpjs 

© https://github.com/azat-co/rpjs/tree/master/bootstrap 
@® http://compass-style.org/ 

(@ http://sass-lang.com/ 

© http://blueprintcss.org/ 
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口 Foundation”: 响应 式 前 端 框架 。 
口 Bootswatch”: Twitter Bootstrap 自 定义 主题 的 集合 。 
口 WrapBootstrap”: Bootstrap 自 定义 主题 的 在 线 商 店 。 





Ly 























3.4 LESS 
LESS 是 动态 样式 语言 。 有 时 ,特别 是 在 这 种 情况 下 ,确实 是 “ 少 (LESS ) 即 是 多 ， 多 即 是 


浏览 器 并 不 会 直接 解析 LESS 语法 ， 所 以 LESS 源 代码 必须 编译 成 CSS 代码 ,下 面 是 三 种 可 
以 使 用 的 方式 : 


(1) 在 浏览 器 里 使 用 LESS JavaScript library”; 
(2) 在 服务 器 端 使 用 特定 的 库 ， 即 针对 Nodejs 可 以 使 用 LESS 模块 %; 
(3) 在 你 自己 的 电脑 上 使 用 诸如 LESS App?、SimpLESS? 或 者 类 似 的 应 用 。 














误 秆 
A 第 一 种 方式 在 开发 的 时 候 是 可 行 的 ， 但 是 在 正式 产品 中 不 推荐 这 么 使 用 。 


LESS 支持 变量 、 混 入 类 和 操作 符 ， 它 们 可 以 帮助 开发 者 更 快 地 重复 使 用 CSS 规则。 下 面 是 
一 个 变量 的 例子 。 


3.4.1 变量 


变量 可 以 减少 重复 代码 ， 同 时 因为 它们 是 在 一 个 地 方 定义 的 ， 可 以 快速 改变 。 大 家 都 知道 ， 
在 设计 阶段 经 常 需要 变动 值 。 


LESS 代码 : 


@color: #4D926F; 
#header { 
color: @color; 


} 





© http://foundation.zurb.com 

© http://bootswatch.com 

® https://wrapbootstrap.com/ 

(@ http://en.wikipedia.org/wiki/The_Paradox_ of Choice: Why More Is Less 
(©) http://lesscss.googlecode.com/files/less-1.3.0.min.js 





© https://npmijs.org/package/less 
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h2 { 
Color: @color; 


} 
编译 后 的 CSS 代码 : 


#header { 

Color: #4D926F; 
} 
h2 { 

Color: #4D926F; 
} 


3.4.2 混入 类 (mixin) 
下 面 是 混入 类 的 语法 ， 它 的 行为 有 点 像 也 数 : 


#header { 
.rounded-corners; 


} 


#footer { 
.rounded-corners (10px); 


} 
编译 后 的 CSS 代码 . 


.rounded-corners (@radius: Spx) { 
border-radius: @radius; 
-webkit-border-radius: Q@radius; 
-moz-border-radius: @radius; 


#header { 
border-radius: Spx; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 

} 

#footer { 
border-radius: 10px; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 


} 
混入 类 可 以 不 使 用 参数 ， 也 可 以 使 用 多 个 参数 。 





3.4.3 ”操作 符 
使 用 操作 符 ， 可 以 对 数字 、 颜 色 或 者 变量 进行 简单 的 数学 运算 。 








图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


3.4 LESS 47 





LESS 中 操作 符 的 例子 : 


@the-border: lpx; 
@base-color: #111; 
@red: #842210; 


#header { 
color: @base-color * 3; 
border-left: @the-border; 
border-right: @the-border * 2; 

} 

#footer { 
color: @base-color + #003300; 
border-color: desaturate(@red, 10%); 


} 
编译 后 的 CSS 代码 : 


#header { 
color: #333333; 
border-left: lpx; 
border-right: 2px; 

} 

#footer { 
color: #114411; 
border-color: #7d2717; 

} 


如 你 所 见 ，LESS 神奇 地 增强 了 原生 CSS 的 可 重用 性 。 下 面 是 一 些 可 用 的 在 线 编译 工具 。 


口 LESS2CSS”: 很 棒 的 使 用 Expressjs 构建 的 LESS 到 CSS 的 转换 器 。 
口 lessphp”: 在 线 demo 编译 器 。 
口 Dopefly”: 在 线 LESS 转换 器 。 
LESS 的 其 他 特性 "如 下 所 示 : 

口 模式 匹配 

口 树 套 规则 

口 函数 

口 命名 空间 

口 作用 域 

口 注释 

口 导入 











CD http://less2css.org/ 

@) http://leafo.net/lessphp/ 

@® http://www.dopefly.com/LESS-Converter/less-converter.html 
(@ http://lesscss.org/#docs 
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3.5 使 用 第 三 方 API (Twitter) 和 jQuery 的 例子 


这 个 例子 完全 是 为 了 演示 而 做 。 它 不 是 接 下 来 我 们 要 讲解 的 Chat 应 用 的 一 部 分 。 这 个 例子 
的 目的 是 为 了 演示 如 何 组 合 jQuery、JSONP 和 REST API 技术。 请 阅读 代码 , 但 不 要 尝试 运行 它 ， 
为 现在 Twitter 废弃 了 API1.0 版 本 。 这 个 应 用 不 会 像 原 来 那样 运行 。 如 果 你 执意 要 自己 承担 风 
险 运 行 它 ， 可 以 按照 下 面 的 说 明 ， 从 GitHub 下 载 或 者 从 PDF 的 版 本 里 复制 代码 。 




















注意 

@ 这 个 例子 是 用 Twitter API 1.0 版 本 构建 的 ， 在 Twitter API 1.1 版 本 下 可 能 无 法 
正常 运行 ,1.1 版 本 需要 用 户 授权 来 进行 RESTAPI 调 用 ,可 以 在 dev.twitter.com 
上 获取 需要 的 密 钥 。 

在 这 个 例子 里 ， 我 们 使 用 jQuery 的 $ .ajax() 子 数 ， 它 的 用 法 如 下 : 


var request = $.ajax({ 


WL 站 生 二， 

dataType: "jsonp", 

data: {page:page, ...}, 
jsonpCallback: "fetchData"+page, 
type: "GET" 


J 

在 上 面 的 代码 片段 中 ， 我 们 使 用 了 下 面 的 参数 : 

口 url 是 API 的 人口 ; 

D dataType 是 我 们 期 望 服务 需 返 回 的 数据 类 型 ， 比 如 json 和 xml ; 
口 data 是 发 送 到 服务 器 的 数据 ; 

口 jsonpCallback 是 字符 串 格 式 的 函数 名 ， 在 请 求 返 回 的 时 候 调 用 ; 
D type 是 HITP 请 求 方法 ,例如 GET 和 PosT。 

更 多 关于 ajax () 的 参数 和 例子 ， 请 参考 api.jquery.com/jQuery.ajax。 
给 用 户 点 击 事件 添加 监听 器 ,我 们 需要 使 用 jQuery 库 里 的 click 函数 , 它 的 用 法 也 非常 简单 : 


$s("#btn") .click(function() { 






































} 


$ ("#btn") 是 指向 DOM 中 HTML 元 素 的 一 个 jQuery 对 象 , 它 的 id 是 ptn。 使 用 了 Twitter 
Bootstrap 类 的 按钮 的 HTML 代码 如 下 : 


<input 
type="button" 
class="primary btn" 
id= "ben" 
value="Show words in last 1000 tweets"/> 


图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


3.5 使 用 第 三 方 API (Twitter ) 和 jQuery 的 例子 49 














为 了 确保 我 们 使 用 的 DOM 中 的 元 素 都 已 经 在 页 面 中 泻 染 好 ， 需 要 把 对 DOM 修改 的 代码 放 
在 如 下 的 jQuery 函数 中 





s(dqocument) .ready (function(){ 
} 


注意 
人 们 通常 对 动态 产生 的 HTML 元 素 有 一 个 误解 ,它们 在 创建 并 注入 到 DOM 之 
前 是 不 存在 的 。 
下 面 的 单 页 应 用 可 以 针对 指定 的 Twitter 用 户 所 发 的 推 文 (200 个 单词 以 内 )， 根 据 其 中 单词 
的 使 用 频率 ， 由 高 到 低 依次 打印 出 这 些 单词 。 
例如 ， 叫 @jack 的 用 户 的 推 文 如 下 : 
"hello world" 
"hello everyone, and world" 


"hi world" 


返回 的 结果 会 是 : 























world 
hello 
and 

TH 
everyone. 


源 代码 在 rpjs/jquery" 目 录 下 。, 它 是 一 个 单 页 应 用 ,只 有 一 个 文件 index.html, 主要 的 JavaScript 
算法 以 下 面 的 方式 实现 : 





$ (document) .ready (function(){ 


我 们 使 用 document .ready 推迟 执行 ， 直 到 DOM 全 部 加 载 完 成 后 。 





$s('#btn') .click(function() { 


这 给 使 用 了 类 “btn” 的 元 素 添 加 了 点 击 事件 监听 器 。 








Var username=$ ('#username') .val(); 


// 发 请 求 ， 执 行 回调 


var url] = 
'https://api.twitter.com/1/statuses/user_ timeline.json?' + 
'include_entities=true&include rts=true&screen name=' + 


username + '&count=1000'，; 


实例 化 变量 username 变量 , 把 id 为 username 的 输入 字段 里 的 值 赋 给 它 。 在 接 下 来 的 一 





GD https://github.com/azat-co/rpjs/tree/master/jquery 
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行 里 ， 我 们 把 Twitter REST API 的 地 址 赋值 给 url 变量 。 这 个 地 址 返回 用 户 时 间 轴 上 的 推 文 。 


if (username != '') { 
list = []; // 存 放 不 重复 单词 的 全 局 列表 
counter = { }; 


Var pages = 0; 
getData (url); 
} 
else { 
alert('Please enter Twitter username') 


} 

为 了 避免 错误 的 请 求 ， 检 查 username 变量 是 否 为 空 。 如 果 用 户 名 正常 ， 使 用 getData () 
发 送 请 求 。 这 里 使 用 了 之 后 我 们 将 要 定义 的 一 个 具名 函数 , 这 样 做 是 为 了 防止 出 现 回 调 般 套 (“ 奥 
名 昭著 ”的 pyramid of doom" )。 





}) 


关闭 点 击 回 调和 ready 国 数 代码 块 。 


function getData(url) { 
Var request = $.ajax({ 
ul WE, 
dataType: 'jsonp', 
data: {page: 0}, 
jsonpCallback: 'fetchData', 
type: 'GET' 
人 
} 


JSONP 获取 函数 很 神奇 的 (幸好 有 jQuery 存在 ) 使 用 插入 script 标签 来 进行 跨 域 请 求 ， 
同时 把 回调 函数 名 添加 到 请 求 查 询 字 符 串 里 。 
我 们 使 用 1ist 数组 和 counter 变量 来 完成 这 个 算法 : 


var list = []; // 存 放 不 重复 单词 的 全 局 列表 
Var counter = {}; // 每 个 单词 重复 的 次 数 


用 来 查找 和 计数 的 实际 函数 : 





function fetchData(m) { 
for (i = 0; i < m.length; i++) { 
Var words = ml[lil].text.split(' '); 
for (j = 0; j < words.length; j++) { 
words[j] = words[j] .replace(/\,/g, ''); 
// 其 他 代码 …… 
if (words[j].substring(0, 4) != "http" && words[j] != '') { 
if (list.indexOf (words[j]) < 0) { 





QD http://tritarget.org/blog/2012/11/28/the-pyramid-of-doom-a-JavaScript-style-trap/ 
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list.push(words[j]); 
counter[words[j]] = 1; 
} 
else { 
// 给 单词 计数 器 加 1 
counter [words[j]]++; 





循环 遍历 所 有 的 单词 ， 并 且 使 用 散 列表 作为 查找 表 和 计数 存储 。 


i < list.length; i++) { 
counter[llist[il]3 


£0o¥ (二 0 





var 五 = Us 
for (j = i; j < list.length; j++) { 


if (counter[list[il]] < counter[list[j]]) { 
用: 
Tistitil ee List[j] 
list[j] = p; 
maxC = 1; 

















接 下 来 的 代码 段 按 重复 的 次 数 给 单词 排序 ， 通 过 把 结果 插入 到 DOM 中 进行 展示 : 


var Str Ss 了 
for (i = 0; i < list.length; i++) { 
str += counter[list[i]] + ': ' + list[i] + '\n'; 
} 
$('#1log') .val (str); 
$('#info') .html('Analyzed: ' + list.length + 
'word(s) form ' + m.length + 
'tweet (s).'); 


} 
完整 的 index.html 源码 : 


$ (document) .ready (function() 
$('#btn') .click(function() 
// 这 里 可 以 替换 加 载 图 片 
Var username = $('#username') .val(); 
// 发 请 求 ， 执 行 回调 
Var url = 
'https://api.twitter.com/1/statuses/user_ timeline.json?' + 
'include_entities=true&kinclude rts=true&screen name=' + 
username + '&count=1000'; 
if (username != '') { 
list = []; // 存 放 不 重复 单词 的 全 局 列表 
Counter = { }; 
Var pages = 0; 


{ 
{ 
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getData (url); 
} 
else { 
alert('Please enter Twitter username') 


} 
function getData(url) { 
Var request = $.ajax({ 
Uris Url., 
dataType: 'jsonp', 
data: {page: 0}, 
jsonpCallback: 'fetchData', 
type: 'GET' 
} 
//ajax 回调 函数 
var list = []; // 存 放 不 重复 单词 的 全 局 列表 
Var counter = { }; 
Var pages = 0; 


function fetchData(m) { 
for (i = 0; i < m.length; i++) { 
Var words = ml[i].text.split(' '); 


for (j = 0; j < words.length; j++) { 
words[j] = words[j] .replace(/\,/g, ''); 
if (words[j].substring(0, 4) != "http" && words[j] != '') { 


if (list.indexOf (words[j]) < 0) { 
list.push(words[j]); 
counter[words[j]] = 1; 





} 

else { 
// 给 单词 计数 器 加 1 
counter[words[j]]++; 





} 
} 
/ /按照 重复 次 数 排序 
for (i = 0; i < list.length; i++) { 
Var max = counter[list[i]]; 
var DE dy 
for (j = i; j < list.length; j++) { 





if (counter[list[i]] < counter[list[j]]) { 
Bp = 1ist[t]s 
List[i] -= List[jls 
list[j] = p; 
maxC = i; 
} 
} 
} 
/ /打印 排序 后 的 结果 


/ /按照 重 复 的 次 数 很 好 地 打印 
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var str="'" 
for (i = 0; i < list.length; i++) { 
str += counter[list[i]] + ': ' + list[i] + 


S("#1lo0.) veal (stre): 


$('#info') .html('Analyzed: ' + list.length + 
'word(s) form ' + m.length + 
‘tweet(s).'); 


} 


'\n'; 


试 着 在 有 本 地 HTTP 服务 器 和 没有 的 情况 下 运行 它 。 提示 : 由 于 它 十 分 依赖 JSONP, 所 以 在 


没有 HTTP 服务 名 的 情况 下 它 是 不 会 正常 工作 的 。 
注意 


这 个 例子 是 在 Twitter API 1.0 版 本 的 基础 上 搭建 的 ， 它 可 能 在 Twitter API 1.1 
版 本 下 无 法 正常 工作 , 1.1 版 本 的 REST API 调 用 需要 用 户 认 证 。 需 要 的 密 钥 可 
以 从 dev.twitter.com 获取 。 如 果 你 觉得 必须 要 有 一 个 可 正常 运行 的 版 本 ， 请 发 


邮件 到 hi@rpjs.co 进行 反馈 。 


3.6 Parse.com 





Parse.com 是 一 个 可 以 用 来 替换 数据 库 和 服务 器 的 服务 。 它 的 出 现 是 为 了 方便 移动 程序 开发 。 
不 过 , 在 使 用 RESTAPI 和 JavaScriptSDK 的 情况 下 , Parse.com 适用 于 任何 Web 和 桌面 应 用 数据 
存储 ( 及 其 他 功能 )， 因 此 成 为 理想 的 用 来 快速 构建 原型 的 工具 。 








浏览 Parse.com 并 且 注 册 一 个 免费 账户 。 创 建 一 个 


应 用 ， 





到 
复 


判 应 用 ID、REST API Key 和 


JavaScript Key。 我 们 进入 自己 在 Parse.com 上 的 集合 的 时 候 需 要 使 用 这 些 密 钥 。 请 留心 “Data 





Browser” 选 项 卡 ， 在 这 里 可 以 看 到 你 的 集合 和 项 目 。 


我 们 创建 一 个 简单 的 应 用 ， 使 用 Parse.com 的 JavaScript SDK 保存 数据 到 集合 里 。 这 个 应 用 





包含 index.html 和 app.js。 下 面 是 项 目的 结构 : 


/parse 
-index.html 
-app.js 





这 个 例子 在 GitHub 上 的 rpjs/parse" 目 录 , 我 们 鼓励 你 手动 输入 代码 。 从 创建 ndex.html 开始 : 


<html lang="en"> 
<head> 


引入 谷歌 CDN 上 的 压缩 版 jQuery 库 : 





GD https://github.com/azat-co/rpjs/tree/master/parse 
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<script 
type="text/javascript" 
SEC= 
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 
</script> 


从 Parse 的 CDN 上 引入 Parse.com 库 : 





SLE 
src="http://ww.parsecdn.com/js/parse-1.0.14.min.js"> 
</script> 


引入 app.js 文件 : 


<script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
<!-- 我 们 将 在 这 里 做 一 些 事情 --> 
</body> 
</html> 


创建 app.js， 并 日 使 用 $ (document) .ready 保证 修改 的 时 候 DOM 已 经 准备 好 了 : 





$ (document) .ready (function() { 
从 Parse.com 控制 面板 获取 并 修改 parseApplicationId 和 parseJavaScriptKey 的 值 : 


Var parseApplicationId=""; 
Var parseJavaScriptKey=""; 


因为 之 前 已 经 包含 了 Parse JavaScript SDK， 现 在 我 们 可 以 使 用 全 局 对 象 Parse。 我 们 使 用 
键 初始 化 一 个 连接 ， 并 且 创 建 一 个 对 Test 集合 的 引用 : 








Parse.initialize(parseApplicationId, parseJavaScriptKey); 
Var Test = Parse.Object.extend("Test"); 
Var test = new Test(); 


下 面 的 示例 代码 ， 会 保存 一 个 键 为 name 和 text 的 对 象 到 Parse.com 的 Test 集合 : 


test.savelt{ 
name: "John", 
texts "hiv 4 


为 了 方便 ，save () 方 法 像 jQuery .ajax() 函数 一 样 接收 回调 参数 success 和 error。 为 
了 确认 一 下 ， 我 们 只 需要 看 一 下 浏览 器 的 控制 台 : 


success: function(object) { 
console.log("Parse.com object is saved: " + object); 
// 另 外 也 可 以 使 用 下 面 的 
//alert ("Parse.com object is saved"); 


}, 
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知道 保存 失败 的 原因 也 是 很 重要 的 : 


error: function(object) { 
console.log("Error! Parse.com object is not saved: "+object); 





3 
}) 


完整 的 index.html 的 源码 如 下 : 


<html lang="en"> 
<head> 
<script 
type="text/javascript" 
Srcs 
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 
人 SG 
<script 
src="http://ww.parsecdn.com/js/parse-1.0.14.min.js"> 
</script> 





<script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
<!-- 我 们 将 在 这 里 做 一 些 事情 --> 
</body> 
</html> 


完整 的 appjjs 的 源码 如 下 : 


$s (document) .ready (function() { 
Var parseApplicationId = ""; 
Var parseJavaScriptKey = ""; 
Parse.initialize(parseApplicationId, parseJavaScriptKey); 
Var Test = Parse.Object.extend("Test"); 
Var test = new Test(); 
test.savel(l{ 
name: "John", 
texts "hi"}: +{ 
success: function(object) { 





console.log("Parse.com object is saved: " + object); 
// 另 外 也 可 以 使 用 下 面 的 
//alert ("Parse.com object is saved"); 
入 
error: function(object) { 
console.log("Error! Parse.com object is not saved: " + object); 


上 秆 
万 
这 里 我 们 需要 使 用 一 个 从 Parse.com 控制 面板 获取 的 JavaScript SDK Key。 在 
jQuery 例子 里 ， 我 们 会 使 用 从 相同 的 网 页 获取 的 REST API Key。 如 果 你 从 
Parse.com 得 到 了 一 个 401 未 授权 错误 ,可 能 是 因为 你 使 用 了 错误 的 API 密 钥 。 


> 


图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


56 第 


第 3 章 jQuery 和 了 Parse.com 


一 切 正常 的 话 ， 在 Parse.com 的 Data Browser 里 可 以 看 到 Test 被 “John 
时 ， 在 开发 者 工具 里 也 可 以 看 到 合适 的 消息 
我 们 的 Chat 应 用 里 会 有 用 





Parse.com 自 带 一 个 






































“John” 和 “hi” 让 充 。 同 
。 Parse.com 自动 创建 objectID 和 时 间 惟 ， 这 些 在 
说 明 性 的 Hello World 应 用 ， 它 们 在 新 项 目 " 和 已 有 项 目 ? 的 快速 开始 指南 
部 分 。 
3.7 ”使 用 Parse.com 的 Chat 概 
Chat 应 用 包含 一 个 输入 字段 、 一 个 消息 列表 和 一 个 发 送 按钮 。 我 们 需要 展示 已 经 存在 的 消息 
列表 和 发 送 新 消息 .这 里 使 用 Parse.com 作为 后 端 , 稍 后 我 们 会 换 成 结合 使 用 MongoDB 的 Nodejs。 

你 可 以 在 Parse.com 获 取 免 费 账 户 。JavaScript 指 南 可 以 从 https:/parse.com/docs/js_guide 获 取 

JavaScript API 可 以 从 https://parse.com/docs/js/ 获 取 。 











注册 之 后 ， 如 果 没 有 应 用 ,到 控制 面板 中 创建 新 应 用 。 复制 Application ID 和 JavaScript SDK 
key 以 及 REST API Key。 稍 后 我 们 需要 使 用 它们 。 这 里 有 一 些 使 月 


些 使 用 Parse.com 的 方法 。 
口 REST API: 我 们 将 在 jQuery 的 例子 里 使 用 这 种 方法 。 
口 JavaScript SDK: 前 面 的 例子 里 我 们 使 用 的 是 这 种 方法 , 在 Backbone.js 的 例子 里 , 我 们 
会 使 用 这 种 方法 。 



































REST API 是 更 常见 的 方式 。Parse.com 提供 了 可 使 用 jQuery 库 中 的 $ .ajax() 方 法 请 求 的 和 人 
。 这 里 是 一 些 可 用 的 URL 和 方法 的 描述 : parse.com/docs/rest。 


3.8 使 用 Parse.com 的 Chat 








REST API 和 jQuery 版 本 
辫 的 代码 在 rpjs/rest* 目 录 里 ,但 是 我 们 鼓励 你 先 自己 写 应 用 代码 。 
将 但 


我 们 不 需要 使 用 JSONP 


我 们 将 要 使 用 Parse.com 的 REST API 和 jQuery。 由 于 Parse.com 支持 跨 域 AJAX 请 求 ， 所 以 
注意 


/ 忆 、 





部 署 替代 Parse.com 的 后 端 时 , 在 不 同 的 域名 上 , 要 么 在 前 
要 么 自 定义 后 端 CORS 头 。 本 书后 面 会 涉及 这 个 主题 。 


使 用 JSONP 
GD https://parse.com/apps/quickstart#js/blank 
© https://parse.com/apps/quickstart#is/existing 
© https://github.com/azat-co/rpjs/tree/master/rest 
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现在 的 应 用 结构 是 这 个 样子 的 : 


index.html 
css/bootstrap.min.css 
css/style.css 
js/app.js 


让 我 们 来 设计 Chat 应 用 的 界面 。 我 们 想 展示 一 个 以 时 间 为 顺序 的 带 有 用 户 名 的 消息 列表 。 
表格 可 以 很 好 的 完成 这 个 工作 ， 而 且 ， 当 新 消息 到 达 的 时 候 动态 插入 <tr> 元 素 就 可 以 了 。 


创建 一 个 包含 下 面 内 容 的 index.html 文件 : 


口 包含 JS 和 CSS 文件 ; 

口 使 用 Twitter Boostrap 进行 响应 式 ; 

口 一 个 用 来 展示 消息 的 表格 ; Se 
口 用 来 添加 新 消息 的 表单 。 


我 们 从 nead 标签 和 依赖 开始 。 我 们 将 包含 CDN 上 的 jQuery、 本 地 的 app.js 和 本 地 压缩 过 
的 Twitter Boostrap， 以 及 自 定义 样式 的 style.css: 

















<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<script 
STC= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jaquery.min.js" 
type ="text/javascript" 
language ="javascript" ></script> 
<script src="js/app.js" type="text/javascript" 
language ="javascript" ></script> 
<link href="css/bootstrap.min.css" type="text/css" 
rel="stylesheet" /> 
<link href="css/bootstrap-responsive.min.css" type="text/css" 
rel="stylesheet" /> 
<link href="css/style.css" type="text/css" rel="stylesheet" /> 
</head> 


body 元 素 包 含 Twitter Boostrap 支架 元 素 ， 用 container-fluid 和 row-fluid 来 定义 : 


<body> 
<div class="container-fluid"> 
<div class="row-fluid"> 
<h1L>Chat with Parse REST API</Ph1> 


消息 表格 是 空 的 ， 因 为 我 们 将 会 使 用 JS 代码 动态 填充 它 


<table class="table table-bordered table-striped"> 
<caption>Messages</caption> 
<thead> 
<tr> 
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<th> 
Username 
/Ens 
<th> 
Message 
he 
</ tr 
</thead> 
<tbody> 
a 
<td colspan="2">No messages</td> 
六 七 关公 
</tbody> 
</table> 
</div> 


接 下 来 是 新 消息 表单 ， 它 的 SEND 按钮 使 用 了 Twitter Boostrap 的 btn 和 btn-primary 类 : 





<div class="row-fluid"> 
<form id="new-user"> 
<input type="text" name="username" 
placeholder="Username" /> 
<input type="text" name="message" 
placeholder="Message" /> 
<a id="send" class="btn btn-primary">SEND</a> 
</form> 
</div> 
</div> 
</body> 
</html> 


完整 的 index.html 的 源码 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script 
src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 
type ="text/javascript" 
language ="javascript" ></script> 
<script src="js/app.js" type="text/javascript" 
language ="javascript" ></script> 
<link href="css/bootstrap.min.css" type="text/css" 
rel="stylesheet" /> 
<link href="css/bootstrap-responsive.min.css" type="text/css" 
rel="stylesheet" /> 
<link href="css/style.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<div class="container-fluid"> 
<div class="row-fluid"> 
<h1L>Chat with Parse REST API</Ph1> 
<table class="table table-bordered table-striped"> 
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<caption>Messages</caption> 
<thead> 
ah eh a 
<t hs 
Username 
</th> 
< 
Message 
</th> 
/EE 
</thead> 
<tbody> 
<tr> 
<td colspan="2">No messages</td> 
A 
</tbody> 
</table> 
</div> 
<div class="row-fluid"> 
<form id="new-user"> 
<input type="text" name="username" 
placeholder="Username" /> 
<input type="text" name="message" 
placeholder="Message" /> 
<a id="send" class="btn btn-primary">SEND</a> 
</form> 
</div> 
</div> 
</body> 
</html> 


这 个 表格 将 包含 我 们 的 消息 。 表 单 为 新 消息 提供 输入 。 
现在 我 们 来 写 三 个 主要 的 函数 。 
(1) getMessages () : 获取 消息 的 函数 。 


(2) updatevView() : 演 染 消息 列表 的 函数 。 
(3) $('#send') .click(...): 触发 发 送 消 息 的 函数 。 


为 了 保持 简洁 ,我 们 把 所 有 的 逻辑 代码 放 到 app,js 这 个 文件 里 。 当 然 ， 如 果 项 目 变 大 ， 需 要 
把 代码 按 功能 分 成 小 文件 。 

使 用 你 自己 的 值 奉 换 下 面 的 值 ， 注 意 这 里 使 用 的 是 REST API Key， 不 是 之 前 例子 里 使 用 的 
JavaScript SDK Key: 








i 


Var parseID='YOUR_ APP_ID'，; 
Var parseRestKey='YOUR_REST_API_KEY'; 


把 所 有 的 东西 打包 到 document .ready 里 ， 获 取消 息 ， 定 义 SEND 点 击 事件 : 





$s (document) .ready (function()t{ 
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getMessages (); 

$s("#send") .click (function(){ 
Var username = $('input[lname=username] ') .attr('value'); 
Var message = $('input[name=messagel]').attr('value'); 


console.1log (username) 
congsoleylog(" 1") 


提交 一 个 新 消息 的 时 候 ， 使 用 jQuery .ajax 发 送 HTTP 请 求 : 


$.ajax({ 
url: 'https://api.parse.com/1l/classes/MessageBoard', 
headers: { 
'X-Parse-Application-Id' : parseID, 
'X-Parse-REST-API-Key': parseRestrey 
}; 
contentType: 'application/json', 
dataType: 'json', 
processData: false, 
data: JSON.stringifyl(t{ 
'username': username, 
'message': message 
3; 
type: 'POST', 
success: function() { 
console.log('sent') 
getMessages (); 


’ 


} 
error: function() { 
console.1log('error'); 





这 个 方法 同样 使 用 jQuery .ajax 函数 获取 远程 RESTAPI 服 务 器 的 消息 列表 : 





function getMessages() { 
$.ajax({ 

url: 'https://api.parse.com/1/classes/MessageBoard', 

headers: { 
'X-Parse-Application-1Id': parseID, 
'X-Parse-REST-API-Key': parseRestrey 

} 

contentType: 'application/json’', 

dataType: 'json', 

type: 'GET', 


如 果 请 求 成 功 完成 ( 状态 是 200 或 类 似 表示 )， 我 们 调用 updateVievw 方法 : 




















success: function(data) { 
console.log('get'); 
updateView(data); 

> 
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error: function() { 
console.log('error'); 


} 
} 


这 个 方法 把 我 们 从 服务 需 获 取 的 消息 泻 染 : 





function updateView (messages) { 


使 用 jQuery 选择 器 .table tbody 选择 元 素 并 创建 一 个 引用 。 接 下 来 ， 我 们 清空 这 个 元 素 


的 innerHTML: 


Var table=$('.table tbody'); 
table.html(''); 


使 用 jQuery .each 方法 遍历 所 有 消息 : EE 


$.each (messages.results, function (index, value) { 
var trEl] = 


下 面 的 代码 使 用 编程 方式 创建 HTML 元 素 ， 并 且 创 建 这 些 元 素 的 jQuery 对 象 : 


SC"<tr><tda> 
+ value.username 
+ '</td><td>' 
+ Vvalue.message + 
GE 


追加 表格 tbody 元 素 : 


table.append (trEl); 
3 
console.log(messages); 


} 











完整 的 app.js: 


Var parseID='YOUR_ APP_ID'; 
Var parseRestKey='YOUR_REST_API_KEY'; 


$s (document) .ready (function(){ 


getMessages (); 

$s("#send") .click (function()t{ 
Var username = $('input[name=usernamel]') .attr('value'); 
Var message = $('input[name=messagel]') .attr('value'); 


console.1log (username) 
console.log('!') 
$.ajax({ 
url: 'https://api.parse.com/1/classes/MessageBoard', 
headers: { 
'X-Parse-Application-Id': ParseID， 
'X-Parse-REST-API-Key': parseRestrey 
jy 
contentType: 'application/json', 
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dataType: 'json', 

processData: false, 

data: JSON.stringifyl(t{ 
'username': username, 
'message': message 

}) ， 

typer: "POST"., 

success: function() { 
console.log('sent') 
getMessages (); 


’ 


站 
error: function() { 
console.log('error'); 


function getMessages() { 


$.ajax({ 

url: 'https://api.parse.com/1/classes/MessageBoard' 

headers: { 
'X-Parse-Application-1d': ParseID， 
'X-Parse-REST-API-Key': parseRestKey 

} 

contentType: 'application/json’', 

dataType: 'json', 

type: 'GET', 

success: function(data) { 
console.log('get'); 
updateView(data); 

} 

error: function() { 
console.log('error'); 


} 


function updateView(messages) { 


Var table=$('.table tbody'); 
table.html(''); 
$.each (messages.results, function (index, value) { 
var trEl = 
Si("<tE><ta>" 
+ Vvalue.username 
+ '</td><td>' 
+ Value.message + 
</td></ tr )s 
table.append (trEl1); 
es 
console.log (messages); 
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它 将 会 调用 getMessages () 方 法 , 然后 通过 jQuery 库 的 $ .ajax 发 送 一 个 GET 请 求 。 ajax 
方法 完整 的 参数 列表 可 以 在 apijquery.com/jQuery.ajax" 获取 。 最 重要 的 参数 是 URL、 首 部 和 类 型 
参数 。 

在 成 功 响 应 时 , 它 会 调用 updateView() 方 法 ,这 个 方法 清空 表格 的 tbody 并 且 使 用 jQuery 
的 $ .each 函数 (apijquery.conryjQuery.each2 ) 遍历 响应 结果 。 点 击发 送 按钮 ， 会 发 出 一 个 PosmT 
请 求 到 Parse.com REST API， 接 下 来 ， 成 功 响 应 ， 再 次 使 用 getMessages 获取 所 有 消息 。 


下 面 是 使 用 jQuery 动态 创建 div HTML 元 素 的 一 个 方法 : 


SEE 








3.9 推送 到 GitHub 


为 了 创建 一 个 GitHub 仓库 ， 需 要 先 浏览 github.com， 登 录 并 且 创 建新 仓库 。 创 建 完成 后 会 
有 一 个 SSH 地 址 ， 复 制 它 。 在 终端 窗口 ， 切 换 到 你 想 推 送 到 GitHub 的 项 目 目录 。 


(1) 在 项 目 目录 的 根部 初始 化 一 个 Git 库 : 

















S: 交工 世人 
(2) 把 所 有 的 文件 添加 到 仓库 ， 并 开始 追踪 它们 : 
$ git adqd . 


(3) 创建 第 一 条 提交 : 





$ git commit -am "inital commit" 

(4) 添加 GitHub 远程 地 址 : 

$ git remote add your-github-repo-ssh-url 

这 个 地 址 看 起 来 像 这 样 : 

$ git remote add origin git@github.com:azat-co/simple-message-board.git 
(5) 现在 可 以 使 用 下 面 的 命令 把 本 地 Git 仓库 推送 到 GitHub 上 的 远程 位 置 : 

$ git push origin master 

(6) 你 可 以 在 自己 的 github.com 账户 和 仓库 里 看 到 刚才 推送 的 文件 。 

稍 后 ， 当 对 文件 进行 修改 时 ， 没 必要 重复 上 面 的 所 有 步骤 ， 只 需要 执行 : 





GD http://api.jquery.com/jQuery.ajax/ 
© http://api.jquery.com/jQuery.each/ 
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$ git aqd . 
$ git commit -am "some message" 
$ git push origin master 


如 果 没 有 新 的 需要 跟踪 的 文件 ， 使 用 : 








$ git commit -am "some message" 
$ git push origin master 


提交 单独 的 文件 变化 ， 


$ git commit filename -m 
$ git push origin master 


从 Git 仓 库 里 删除 文件 : 


运行 : 


"some message" 


$ git rm filename 
获取 更 过 Git 命令 的 信 ， 
$ git --help 


用 Windows Azure 或 者 Heroku 部 署 应 用 和 推 
替换 不 同 的 远程 地 址 (URL ) 和 别名 。 





CD: 








将 会 


3.10 ”部 署 到 Windows Azure 


使 用 Git 部 署 到 Windows Azure。 


(浏览 Windows Azure 网 站 https://windows.azure.com， 
个 ,通过 提供 用 户 名 和 密码 ( 和 LiveID 不 同 ) 激活 “Set up Git publishing”。 复制 你 的 URL 














创建 
到 别 的 地 方 。 











(2) 在 你 要 发 布 或 部 署 的 项 目 目录 的 根部 初始 化 一 个 Git 库 : 


$it LnEt 


送 文件 到 GitHub 一 样 简单 。 最 后 的 三 步 (#4-6 ) 





使 用 Live ID 登录 ， 如 果 没 有 站 点 ， 





(3) 把 所 有 的 文件 添加 到 仓库 ， 并 开始 追踪 它们 : 


$ git adqd . 
(4) 创建 第 一 条 提交 : 


$ git commit -am 


(5) 添加 Windows Azure 作为 Git 仓库 的 一 个 


"inital commit" 


远程 地 址 : 


$ git remote add azure your-url-for-remote-repository 





在 我 这 里 ， 这 个 命令 看 起 来 是 这 样 的 : 
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$ git remote agd 

> azure https://azatazure@azat.scm.azurewebsites.net/azat.git 

(6) 推送 本 地 Git 仓库 到 远程 Windows Azure 仓库 ， 它 会 部 署 文件 和 应 用 : 

$ git push azure master 

和 GitHub 一 样 ， 稍 后 我 们 更 新 修改 文件 的 时 候 ， 不 需要 重复 前 面 的 几 步 ， 因 为 在 项 目的 根 
目录 已 经 有 了 .git 格式 的 Git 仓 库 描述 目录 了 。 


3.11 ”部署 到 Heroku 


最 大 的 区 别 是 Heroku 使 用 Cedar Stack, 它 不 支持 静态 项 目 , 比如 :我 们 之 前 的 测试 Parse.com 
应 用 和 使 用 Parse.com 版 本 的 Chat 应 用 。 我 们 可 以 使 用 一 个 “伪造 的 ”PHP 项目 来 突破 这 个 限制 。 
在 项 目 目 录 index.html 同 级 创建 一 个 index.php 文件 , 我 们 会 把 它 推荐 到 Heroku, 它 的 内 容 如 下 : 








<?php echo file get contents('index.html'); ?> 

为 了 方便 使 用 ，index.php 文件 已 经 包含 在 rpjs/rest 里 。 

这 里 有 一 种 更 简单 的 使 用 Cedar Stack 向 Heroku 上 传 静 态 文 件 的 方法 ,“Static Sites on Heroku 
Cedar”" 这 篇 文章 里 有 详细 阐述 。 为 了 让 Cedar Static 正常 处 理 你 的 静态 文件 ， 你 只 需要 在 项 目 
目录 中 输入 并 执行 下 面 的 命令 : 


$ touch index.php 
$ echo 'php_flag engine off' > .htaccess 


另外 ， 你 也 可 以 使 用 Ruby Bamboo 栈 。 在 这 种 情况 下 ， 我 们 需要 有 下 面 的 目录 结构 : 


-project folder 
-config.ru 
ph ub le 
-index.html 
-/css 
app.js 


在 index.html 里 引用 的 CSS 或 者 其 他 静态 资源 应 该 使 用 相对 路 径 , 即 “css/style.css”" config.ru 
文件 应 该 包含 下 面 的 代码 : 


use Rack: :Static， 
:urls => ["/stylesheets", "/images"], 
FOOt => DuDLEe" 


run lambda { |env| 
[ 
200， 





人 http://kennethreitz.com/static-sites-on-heroku-cedar.html 
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~ 


'Content-Type' => 'text/html', 
'Cache-Control' => 'public, max-age=86400' 
}, 
File.open('public/index.html', File::RDONLY) 
] 
} 


更 多 细节 请 参考 : devcenter.heroku.com/articles/static-sites-on-heroku。 
当 准 备 好 了 所 有 Cedar Stack 或 者 Bamboo 的 支持 文件 ， 按 照 下 面 的 步骤 进行 
(1) 如 果 还 没有 本 地 Git 仓库 和 .git 目录 ， 创 到 








[由 


Sgit Tnit 

(2) 添加 文件 : 

$ git dd 

(3) 提交 文件 并 更 改 : 

$ git commit -m "my first commit" 

(4) 创建 Heroku Cedar Stack 应 用 ， 并 且 添 加 远程 地 址 : 

$ heroku create 

如 果 一 切 正常 ， 它 会 告诉 你 远程 已 经 添加 ， 应 用 已 经 创建 ， 并 且 告 诉 你 应 用 的 名 字 。 
(5) 查看 远程 地 址 ， 输 入 并 执行 ( 可 选 ): 











$ git remote show 

(6) 部 署 代码 到 Heroku 使 用 : 

$ git push heroku master 

终端 日 志 会 告诉 你 这 次 部 署 的 过 程 


(7) 在 默认 的 浏览 器 里 打开 应 用 ， 执 行 





$ heroku open 


或 者 直接 浏览 你 的 app 地 址 ， 比 如 “http://yourappname-NNNN .herokuapp.com” 
(8) 查看 Heroku 上 应 用 的 日 志 : 





$ heroku logs 





OO https://deveenter.heroku.com/articles/static-sites-on-heroku 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


3.12 更 新 和 删除 消息 67 





使 用 新 的 代码 更 新 应 用 ， 重 复 下 面 的 步骤 即 可 : 


$ git add -A 
$ git commit -m "commit for deploy to heroku" 
$ git push -f heroku 


注意 
@ 每 次 使 用 命令 $ heroku create 创建 一 个 新 的 Heroku 应 用 的 时 候 ， 需 要 为 
它 提 供 一 个 新 的 应 用 URL。 


3.12 ”更 新 和 删除 消息 
按照 REST API 的 原则 , 对 一 个 对 象 的 更 新 操作 最 好 使 用 PUT 方法 , 删除 操作 使 用 DELETE 


方法 。 这 两 个 都 可 以 通过 我 们 在 GET 和 POST 里 使 用 过 的 jQuery .ajax 函数 简单 搞定 ， 只 需要 
把 我 们 希望 操作 的 对 象 ID 传人 。 
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4.1 从 头 开 始 构建 Backbone.js 应 用 


我 们 将 使 用 Backbone.js 和 MVC 架构 创建 一 个 典型 的 Hello World 项 目 。 我 知道 这 看 上 去 好 
像 一 开始 就 “ 杀 鸡 用 牛刀 ”了 ， 但 之 后 我 们 会 添加 更 多 复杂 性 ， 包 括 模型 、 子 视图 和 集合 。 


完整 的 Hello World 的 源码 在 GitHub 上 github.com/azat-co/rpjs/backbone/hello-world" 中 。 





依赖 
下 载 下 面 的 库 : 


口 jQuery 1.9 开发 源 文件 ?; 
口 Underscore.js 开发 源 文件 ?; 
口 Backbone.js 开发 源 文件 ”。 





像 这 样 在 index.html 里 引入 这 些 库 : 


< IDOCTYPE> 
<html> 
<head> 





GD https://github.com/azat-co/rpjs/tree/master/backbone/hello-world 
© http://code.jquery.com/jquery-1.9.0.js 

© http://underscorejs.org/underscore.js 

(@ http://backbonejs.org/backbone.js 
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<script src="jquery.js"></script> 
<script src="underscore.js"></script> 
<script src="backbone.js"></script> 


<script> 
//TODO 写 一 些 神 奇 的 JS 代码 | 
</script> 


</head> 

<body> 

</body> 

</html> 
注意 
我 们 也 可 以 把 <script> 放 到 </bodqy> 标 签 之 后 。 这 样 会 改变 脚本 和 余下 的 
HTML 加 载 ， 在 文件 较 大 时 可 以 提升 性 能 。 


在 <script> 标 签 里 定义 一 个 简单 的 Backbone.js Route : 


Var router = Backbone.Router.extend({ 


上 





注意 
现在 , 为 了 尽 可 能 简单 ,， 我们 把 所 有 的 JavaScript 代码 放 到 index.html 文件 里 。 
但 在 实际 的 开发 中 我 们 并 不 推荐 这 样 做 。 稍 后 我 们 会 重 构 它 。 


在 extend 调用 里 设置 指定 的 routes 属性 : 


Var router = Backbone.Router.extend({ 
routes: { 
} 

3 











Backbone.js routes 属性 需要 下 面 的 格式 : 'path/ :param' : 'action', 它 实现 的 是 当 URL 
是 flename#path/param 时 ， 触 发 名 为 action 的 函数 (在 Router 对 象 里 定义 )。 现 在 我 们 只 添 
加 一 个 home 路 由 : 


Var router = Backbone.Router.extend({ 
routes: { 
'home' 





} 
上 


现在 我 们 需要 添加 一 个 home 陈 数 : 


Var router = Backbone.Router.extend({ 
routes: { 
'home' 
is 


home:function(){ 
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//TODO 洽 染 HTML 
} 
}); 


一 会 我 们 再 来 完善 home 方法 、 添 加 创建 和 演 染 View 的 逻辑 。 现 在 我 们 先 定义 nomeView: 





Var homeView = Backbone.View.extend({ 


ss 
看 上 去 很 熟悉 ， 是 吧 ? Backbone.js 所 有 的 组 件 使 用 的 都 是 相同 的 语法 : extena 函数 和 传递 


给 它 的 JSON 对 象 参 数 。 
现在 很 多 种 方式 可 以 进行 但 是 最 棒 的 方式 还 是 使 用 el 和 template 属性 ， 它 们 很 神奇 ， 
即 在 Backbone.js 里 : 


Var homeView = Backbone.View.extend({ 


el:'body', 
template:_.template('Hello World') 


}); 

el 是 一 个 保存 jQuery 选择 右 的 字符 串 , 也 可 以 使 用 ' . 机 #' 作 为 id 名 。template 属 

性 被 赋值 给 传人 Hello World 的 Underscore.js 函数 template 运行 的 结果 。 
泻 染 homeview， 我 们 使 用 this.sel， 这 是 一 个 jQuery 对 象 ， 它 指向 el 属性 ， 使 用 

jQuery .html () 函数 用 this.template() 的 结果 替换 HTML。 下 面 是 我 们 完整 的 Backbone.js 












































View 代码 
Var homeView = Backbone.View.extendq({ 
el: 'body', 
template: _.template('Hello World'), 


render: function(){ 
this.sel.html (this.template({})); 


} 
}); 


现在 我 们 返回 到 router， 添 加 两 行 到 home 员 数 : 


Var router = Backbone.Router.extendl({ 
routes: { 
'home' 
省 


initialize: function(){ 


} 
home: function(){ 
this.homeView = new homeView; 
this.homeView.render(); 
} 
Ds 


一 行 创建 一 个 nomeView 对 象 并 且 赋 值 给 router 的 homeView 属性 。 第 二 行 调用 
homeView 对 象 的 render() 方 法 ， 触 发 Hello World 输出 。 
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最 后 ， 启 动 整体 Backbone 应 用 ， 为 了 保证 DOM 完全 加 载 ， 用 document-ready 包装 器 调用 
new router: 


var app; 

$ (document) .ready (function()t{ 
app = new router; 
Backbone.history.start(); 


}) 
下 面 是 完整 的 index.html 的 代码 : 


<!IDOCTYDES> 

<html> 

<head> 
<script src="jquery.js"></script> 
<script src="underscore.js"></script> 
<script src="backbone.js"></script> 


<script> 
var app; 
Var router = Backbone.Router .extend ({ 
routes: { 
'': 'home' 
} 
initialize: function(){ 
/ /一些 在 对 象 初始 化 的 时 候 执 行 的 代码 
J 
home: function(){ 
this.homeView = new homeView; 
this.homeView.render(); 
} 
3 





Var homeView = Backbone.View.extend ({ 
el: 'body', 
template: _.template('Hello World'), 
render: function(){ 
this.sel.html (this.template({})); 
} 
})3 


$s (document) .ready (function(){ 
app = new router; 
Backbone.history.start(); 


塌 


</script> 
</head> 
<body> 

<div></div> 
</body> 
</html> 


在 浏览 器 里 打开 index.html 看 看 它 是 否 正 常 工作 , 即 “Hello World” 消 息 是 否 在 页 面 中 展现 。 
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这 个 例子 完整 的 代码 在 rpjs/backbone/collections" 目 录 下 。 它 在 从 头 开始 构建 Backbone.js 应 
用 (4.1 节 ) 的 Hello World 基础 上 搭建 而 来 (Hello World 可 以 在 rpjs/backbone/hello-world“ 下 载 )。 


我 们 需要 添加 一 些 模 拟 用 的 数据 ， 并 且 把 它们 和 视图 结合 。 把 下 面 的 代码 放 在 script 标签 之 
后 ， 其 他 代码 之 前 : 








var appleData = [ 
{ 
name: "fuji", 
url: "img/fuji.jpg" 


name: "gala", 
url: "img/gala.jpg" 
} 
1]3 
这 个 就 是 我 们 的 苹果 数据 库 。 说 得 更 准确 一 点 儿 ， 这 是 我 们 的 REST API 的 替代 品 ， 它 会 提 
供给 我 们 苹果 的 名 字 和 图 像 URL ( 数据 模型 )。 


注意 
在 Backbone.js 里 很 容易 使 用 你 自己 的 后 端 REST API 地 址 蔡 换 模拟 数据 集 , 给 
集合 和 (或 ) 模型 添加 一 个 url 属性 ， 然 后 调用 它们 的 fetch() 方 法 。 


现在 为 了 使 用 户 体 验 (UX ) 更 好 ,我 们 在 routes 对 象 里 添加 一 个 新 的 路 由 : 









































routes: { 

'': 'home', 

'apples/:appleName': 'loadApple' 
二 





这 样 之 后 用 户 在 浏览 indaex.htm1l#apple/SOMENAME 的 时 候 可 以 看 到 某 一 个 苹果 的 信息 。 
这 个 信息 由 Backbone Route 里 定义 的 loadApple 函数 获取 和 泻 染 。 








loadApple: function(appleName){ 
this.appleView.render (appleName); 


} 


注意 到 appleName 变量 没 ? 它 和 我 们 在 routes 里 定义 的 一 模 一 样 。 这 就 是 在 Backbone.js 
里 使 用 查询 字符 串 里 参数 ( 比如 : ?param=value&q=search ) 的 方式 。 




















GD https://github.com/azat-co/rpjs/tree/master/backbone/collections 
© https://github.com/azat-co/rpjs/tree/master/backbone/hello-world 
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现在 我 们 重 构 一 下 部 分 代码 ， 包 含 创建 Backbone Collection ， 使 它 和 appleData 变量 绑 定 ， 
把 集合 传递 给 homevView 及 appleView。 人 简单 来 说 ， 我 们 在 Routez 的 构造 两 数 initialize 
里 搞定 这 些 : 


initialize: function() { 
Var apples = new Apples(); 
apples.reset (appleData); 
this.homeView = new homeView({collection: apples}); 
this.appleView = new appleView({collection: apples}); 
js 


这 时 ， 我 们 差不多 已 经 完成 了 Routez 类 ， 它 看 起 来 是 这 样 的 : 


Var router = Backbone.Router .extend ({ 
routes: { 


'': 'home', 

'apples/:appleName': 'loadApple' 
}s 
initialize: function() { 


Var apples = new Apples(); 
apples.reset (appleData); 
this.homeView = new homeView({collection: apples}); 
this.appleView = new appleView({collection: apples}); 

js 

home: function() { 
this.homeView.render(); 

jy 

loadApple: function(appleName) { 
this.appleView.render (appleName); 

} 

3 


对 homeView 做 一 点 小 改动 ， 让 它 可 以 使 用 整个 数据 库 : 


Var homeView = Backbone.View.extend ({ 


el: 'body', 
template: _.template('Apple data: <%= data %>'), 
render: function () { 


this.sel.html (this.templatel({ 
data: JSON.stringify(this.collection.models) 


现在 ,我们 只 是 把 数据 以 JSON 字符 串 的 形式 展示 在 浏览 器 里 。 这 并 不 是 一 种 用 户 友 好 的 方 
式 ， 稍 后 我 们 会 使 用 列表 和 子 视图 来 改进 它 。 
Apple 的 Backbone Collection 非常 干净 和 简单 : 





Var Apples = Backbone.Collection.extend({ 
3 
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注意 
©@ Backbone 在 集合 里 使 用 fetch() 或 者 reset() 方 法 时 会 自动 创建 一 个 模型 。 


Apple 的 视图 也 不 复杂 ， 它 只 包含 两 个 属性 template 和 render。 在 template 里 我 们 需 


要 给 figure、img 和 figcaption 标签 展示 特定 的 值 。Underscorejjs 的 模板 引擎 可 以 很 好 地 处 
理 这 个 任务 : 








Var appleView = Backbone.View.extendl({ 
template: _.templatel 
'<figure>\ 
<img src="<%= attributes.url%>"/>\ 


<figcaption><%= attributes.name %></figcaption>\ 
</figure>'), 


9 








为 了 使 一 个 JavaScript 字 符 串 里 包含 HTML 标签 同时 又 保证 阅读 性 ,我 们 可 以 使 用 反 和 斜 线 (、\ ) 
作为 行 结束 符 ， 也 可 以 使 用 + 来 连接 字符 串 ， 下 面 是 使 用 后 一 种 方法 展示 的 appleView: 
Var appleView = Backbone.View.extendl({ 


template: _.templatel 
'<figure>'+ 














HR 


+'<img src="<%= attributes.url %>"/>'+ 


+'<figcaption><%= attributes.name %></figcaption>'+ 
+'</figure>'), 





你 需要 注意 <=%= 和 %> 符 号 , 它们 告诉 Underscore.js 需要 展示 attributes 对 象 的 url、 name 
属性 。 


最 后 ， 我 们 给 appleVievw 添加 render 国 数 : 


render: function(appleName){ 


var appleModel = this.collection.where({name: appleName}) [0]; 
var appleHtml = this.template(appleModel); 
$s('body') .html (appleHtml); 

} 





我 们 在 集合 里 使 用 where () 方 法 和 [] 选 择 第 一 个 元 素 作 为 模型 。 现 在 render 方法 已 经 可 
以 加 载 数据 和 泻 染 它 了 。 稍 后 ， 我 们 把 这 两 个 功能 重 构 分 离 成 不 同 的 方法 。 














完整 的 应 用 在 rpjs/backbone/collections/index.html 里， 它 是 这 样 的 : 


< IDOCTYPE> 

<html> 

<head> 
<script src="jquery.js"></script> 
<script src="underscore.js"></script> 
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> 





<script src="backbone.js"></script> 


<script> 
Var appleData = [ 
{ 
name: "fuji", 


url: "img/fuji.jpg" 
a 


name:"gala", 
url: "img/gala.jpg" 
} 
2 
Var app; 
var router = Backbone.Router .extend ({ 
routes: { 


"": "home", 

"apples/:appleName": "loadApple" 
js 
initialize: function() { 


Var apples = new Apples(); 

apples.reset (appleData); 

this.homeView = new homeView({ collection: apples }); 
this.appleView = new appleView({ collection: apples }); 





ji 
home: function() { 
this.homeView.render (); 
jy 
loadApple: function(appleName) { 
this.appleView.render (appleName); 
} 
学 
Var homeView = Backbone.View.extend ({ 


el: 'body', 
template: _.template('Apple data: <%= data %>'), 
render: function() { 


this.s$el.html (this.templatel(t{ 

data: JSON.stringify(this.collection.models) 
让 
} 
//TODO 子 视图 
学 





Var Apples = Backbone.Collection.extend({ 


))3 
Var appleView = Backbone.View.extend ({ 
template: _.template('<figure>\ 
<img src="<%= attributes .url %$>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'), 
//TODO 用 加 载 苹 果 过 程 和 事件 绑 定 来 重 写 
render: function(appleName) { 
Var appleModel = this.collection.where({ 
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name: appleName 
] LO 
var appleHtml = this.template(appleModel); 
$('body') .html (appleHtml); 
} 
Do 
$s (document) .ready (function() { 
app = new router; 
Backbone.history.start(); 


} 


</script> 
</head> 
<body> 
<div></div> 
</body> 
</html> 
在 浏览 器 里 打开 collections/index.html 文件 ,你 可 以 看 到 从 “数据 库 ” 里 加 载 的 数据 : Appple 


data: [{"name": "fuji", "url":"img/fuji.jpg"},{"name":"gala", "url":"img/gala 


.jpg"}]o 


现在 在 浏览 磊 里 打开 collections/index.html#apples/fuji 或 者 collections/index.html#apples/gala。 
我 们 期 望 看 到 一 个 带 标题 的 图 像 。 这 是 一 个 详细 视图 ， 在 这 个 例子 里 是 一 个 苹果 。 干 得 不 错 ! 





4.3 ”事件 绑 定 

实际 上 ,获取 数据 并 不 是 立即 发 生 的 ， 让 我 们 来 重 构 代 码 以 便 模 拟 它 。 为 了 创造 更 好 的 用 户 
体验 ， 我们 应 当 展 示 一 个 加 载 图 标 ( Spinner 或 Ajax-loader ) 告诉 用 户 数据 正在 加 载 中 。 

在 Backbone 里 作 事 件 绑 定 是 值得 推荐 的 。 如 果 不 这 么 做 ， 我 们 必须 给 请 求 数据 的 方法 传递 
一 个 用 于 泻 染 的 函数 作为 回调 ， 以 确保 泻 染 方法 不 会 在 得 到 数据 之 前 运行 。 


因此 ， 当 用 户 浏览 详细 视图 ( apples/:iq)， 我们 只 需要 调用 加 载 数 据 的 方法 。 然 后 ， 
为 设置 了 正确 的 监听 需 , 当 接收 到 新 数据 的 时 候 , 视图 会 自动 更 新 。 数据 更 新 的 时 候 , Backbone.js 
支持 多 事件 和 自 定义 事件 。 


改变 路 由 程序 里 的 代码 : 
































loadApple: function(appleName)f{ 
this.appleView.loadApple (appleName); 
} 





除了 appleView 类 ， 其 他 的 保持 不 变 。 我 们 添加 构造 函数 或 者 initialize 方法 ， 这 是 
Backbone.js 框架 里 一 个 特殊 的 字 / 属 性 。 每 个 实例 初始 化 的 时 候 会 调用 这 个 属性 对 应 的 方法 ， 即 
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var someobj = new Someobject( ) 。 也 可 以 给 initialize 方法 添加 额外 的 参数 ， 就 像 在 
视图 里 做 的 那样 (我们 传递 了 一 个 以 collection 为 键 ， 以 apples Backbone Collection 为 值 的 
对 象 )。 更 多 关于 Backbone.js 的 构造 函数 的 信息 ， 请 浏览 backbonejs.org/#View-constructor"。 





Var appleView = Backbone.View.extend ({ 
initialize: function(){ 
//TODO 创建 和 设置 模型 ， 也 就 是 一 个 苹果 
js 





很 好 ,我 们 已 经 有 了 initialize 方法 。 创 建 相当 于 单个 苹果 的 模型 ， 并 且 给 它 设置 正确 
的 监听 器 。 我 们 将 使 用 两 种 事件 一 一 change 和 名 为 spinner 的 自 定义 事件 。 我 们 将 使 用 on () 
函数 , 它 具 备 下 列 属性 : on (event，actions，context)。 更 多 相关 内 容 请 浏览 backbonejs.org/# 
Events-on 。 














Var appleView = Backbone.View.extend ({ 
this.model = new (Backbone.Model.extend({})); 
this.model.bind('change', this.render, this); 
this.bind('spinner',this.showSpinner, this); 


] ， 


上 上 面 的 代码 做 了 两 件 简单 的 事情 : 


(1) 当 模 型 改变 时 调用 applevievw 的 render () 方法; 
(2) 当 事 件 spinner 触发 时 调用 applevievw 的 showSpinner () 方 法 。 








到 目前 为 止 ， 还 不 错 吧 ? 那么 spinner 怎么 办 呢 ， 用 一 个 简单 的 GIF 图 标 ? 让 我 们 在 
appleView 里 创建 一 个 新 的 属性 : 





ee '<img src="img/spinner.gif" width="30"/>', 
还 记得 路 由 程序 里 的 loagdApple 调用 吗 ? 这 是 我 们 在 appleView 里 实现 函数 的 方法 : 


loadqApple:function(appleName){ 
this.trigger('spinner'); 
/ /展示 加 载 图 
var view = this; 
// 需 要 在 闭 包 里 访问 View 
setTimeout (function(){ 


/ /模拟 从 远程 服务 器 获取 数据 消耗 的 时 间 





GD http://backbonejs.org/#View-constructor 
© http://backbonejs.org/#Events-on 
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View.model.set(view.collection.where({ 
name:appleName 
}) [0] .attripbutes); 
},1000); 
> 




















第 一 行 触 发 了 spinnezr 事件 ， 这 个 函数 是 我 们 必须 编写 的 。 
第 二 行 是 为 了 解决 作用 域 问题 ， 我 们 需要 在 闭 包 内 使 用 applevView。 
setTimeout 四 数 是 为 了 模拟 从 远程 服务 需 获 取 响 应 的 时 间 。 在 它 内 部 ， 我 们 使 用 















































model.set() 和 model.attributes (返回 模型 属性 ) 把 选中 的 模型 赋值 给 当前 视图 的 模型 。 


现在 我 们 可 以 移 除 render 方法 里 多 余 的 代码 ， 实 现 showSpinner 国 数 ; 


render: function(appleName){ 
Var appleHtml = this.template(this.model); 
$s('body') .html (appleHtml); 

}, 

showSpinner: function()f{ 


$('body') .html (this.templateSpinner); 
} 


搞定 ! 用 浏览 器 打开 index.html#apples/gala 或 者 index.html#apples/fuji, 可 以 





看 到 加 载 苹果 图 像 时 展示 的 加 载 动画 。 


完整 的 index.html 的 代码 : 


< IDOCTYPE> 

<html> 

<head> 
<SCript Sre="Jauery.Je"></SCrist> 
<script src="underscore.js"></script> 
<script src="backbone.js"></script> 


<script> 
var appleData = [ 
{ 
name: "fuji", 


DE vimo/Euji:jDo" 
}， 


name: "gala", 
UPls: “Img/gala bg 
} 
站 
Var app; 
Var router = Backbone.Router.extendl({ 
routes: { 
"": 'home', 
"apples/:appleName': 'loadApple' 
} 


initialize: function(){ 
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Var apples = new Apples(); 
apples.reset (appleData); 
this.homeView = new homeView({collection: apples}); 
this.appleView = new appleView({fcollection: apples}); 
ss 
home: function(){ 
this.homeView.render(); 
i 
loadApple: function(appleName){ 
this.appleView.loadApple(appleName); 


} 
让 


Var homeView = Backbone.View.extend ({ 
el: 'body', 
template: _.template('Apple data: <%= data %>'), 
render: function(){ 
this.sel.html (this.templatel({ 
data: JSON.stringify(this.collection.models) 
3 
} 
//TODO 子 视图 
})3 





Var Apples = Backbone.Collection.extend({ 


让 
Var appleView = Backbone.View.extend ({ 
initialize: function(){ 
this.model = new (Backbone.Model.extend({})); 
this.model.on('change', this.render, this); 
this.on('spinner',this.showSpinner, this); 
js 
template: _.template('<figure>\ 
<img src="<%= attributes.url%®>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'), 
templateSpinner: '<img src="img/spinner.gif" width="30"/>', 


loadApple:function(appleName){ 

this.trigger('spinner'); 

var View = this; // 需 要 在 闭 包 里 访问 View 

setTimeout (function(){ // 模 拟 从 远程 服务 器 获取 数据 消耗 的 时 间 
View.model.set(view.collection.where({ 

name:appleName 

}) [0] .attributes); 

},1000); 


js 
render: function(appleName)f{ 


( 
Var appleHtml = this.template(this.model); 
$s('body') .html (appleHtml); 
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} 
showSpinner: function(){ 


$('body') .html (this.templateSpinner); 
} 


3 

$s (document) .ready (function(){ 
app = new router; 
Backbone.history.start(); 


}) 


</script> 

</head> 

<body> 
<a href="#apples/fuji">fuji</a> 
<div></div> 

</body> 

</html> 


4.4 使 用 Underscore.js 视图 和 子 视 图 
这 个 例子 的 代码 可 以 从 rpjs/backbone/subview" 获 取 。 








子 视图 也 是 Backbone 视图 , 是 在 另 一 个 Backbone 视图 里 里 创建 和 使 用 的 。 子 视图 对 于 分 离 
UI 事件 (如 点 击 ) 和 相似 模板 ( 比如 apple ) 是 非常 棒 的 一 种 方式 。 








使 用 子 视图 的 情况 ， 可 能 是 表格 里 的 一 行 ， 列 表 里 的 一 项 、 一 个 段落 、 一 个 新 行 等 。 





我 们 重 构 主 页 以 展示 更 好 的 苹果 列表 。 每 一 个 列表 项 包含 苹果 名 和 带 有 onclick 事件 的 
“buy”( 购买 ) 链接 。 我 们 使 用 标准 Backbone extend () 函数 为 单个 苹果 创建 一 个 子 视图 : 





Var appleItemView = Backbone.View.extend ({ 
tagName: '1i', 
template: _.templatel('' 
+'<a href="#apples/<%=name%®%>" target="_blank">' 
+'<%=name%®>' 
+'</a>&nbsp;<a class="add-to-cart" href="#">buy</a>'), 
events: { 
'click .add-to-cart': 'addToCart' 
} 
render: function() { 
this.sel.html (this.template(this.model.attributes)); 
5 
addToCart: function(){ 
this.model.collection.trigger('addToCart', this.model); 
} 
有 
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现在 这 个 对 象 拥有 tagName、template、events、render 和 addToCart 等 属性 和 方法 。 


tagName : '1i', 





tagName 使 Backbone.js 用 指定 的 标签 名 创建 HTML 元 素 , 在 这 个 例子 是 列表 里 的 <1i>。 这 
是 单个 苹果 的 展示 ， 是 列表 里 的 一 行 。 

















template: .template(' 
+'<a href="#apples/<%=name%>" 七 aYget="_blank">' 
+'<%=name%®>' 
+'</a>&nbsp;<a class="add-to-cart" href="#">buy</a>'), 








模板 是 一 个 使 用 Underscore.js 函数 构建 的 字符 串 。 它 们 被 <s$ 和 %> 包 庄 。<%= 简 单 来 说 就 是 指 
打印 值 。 上 面 的 代码 也 可 以 用 反 和 斜 线 的 方式 表示 : 





template: _.template('\ 
<a href="#apples/<%=name%®%>" target="_blank">\ 


</a>&nbsp;<a class="add-to-cart" href="#">buy</a>\ 


'), 





每 一 个 <1i> 包 含 两 个 链接 ( <a> )， 一 个 指向 详细 的 苹果 视图 ( #apples/ :appleName )， 
另 一 个 是 buy 按钮 。 我 们 给 buy 按钮 添加 事件 监听 器 : 





events: { 
'click .add-to-cart': 'addToCart' 
js 








它 的 格式 是 按 下 面 的 规则 : 
事件 + jQuery 选择 器 : 函数 名 
键 和 值 (冒号 右边 和 左边 部 分 ) 都 是 字符 串 ， 比 如 : 


'click .add-to-cart': 'addToCart' 
'click #1load-more': 'loadMoreData' 














这 里 使 用 this.sel 上 的 jQuery 方法 html () 来 展示 列表 里 每 一 项 ，this.sel 是 根据 
tagName 指定 的 <1i> 元 素 : 


render: function() { 


this.s$sel.html (this.template(this.model.attributes)); 
] 
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addToCart 使 用 trigger () 函数 告诉 集合 ,当前 这 个 特定 的 模型 (苹果 ) 将 要 被 用 户 购买 : 


addToCart: function(){ 


this.model.collection.trigger('addToCart', this.model); 
} 


下 面 是 完整 的 appleItemView Backbone View 类 代码 : 





Var appleItemView = Backbone.View.extend ({ 
tagName: '1i', 
template: _.templatel('' 
+'<a href="#apples/<%=name%>" target="_blank">' 
+'<%=name%®>' 
+'</a>&nbsp;<a class="add-to-cart" href="#">buy</a>'), 
events: { 
'click .add-to-cart': 'addToCart' 
} 
render: function() { 
this.s$el.html (this.template(this.model.attributes)); 
} 
addToCart: function(){ 
this.model.collection.trigger('addToCart', this.model); 
} 
} 





简单 极 了 ! 主 视 图 怎么 办 呢 ? 它 如 何 泻 染 每 一 个 项 ， 并 且 给 <11> HTML 元 素 提供 一 个 包装 
髓 <ulL> 容 需 呢 ? 我 们 需要 修改 增强 homeView。 


首先 ， 添 加 儿 个 简单 易 懂 的 jQuery 选择 需 字 符 串 作为 值 的 属性 给 homeView: 








el: ‘'body'., 


listEl: '.apples-list', 
CartEl: '.cart-box', 





我 们 可 以 在 模板 里 使 用 上 面 的 属性 ， 或 者 在 nomeView 直接 硬 编码 ( 稍 后 会 重 构 ): 





template: _ .template('Apple data: \ 


<ul class="apples-list">\ 
</ul>\ 


<div class="cart-box"></div>'), 


创建 nomeView 的 时 候 (new homeView ) 会 调用 ijnitialize 方法 ,在 它 里 面 我 们 泻 染 模 
板 (使 用 html () 方 法 )， 给 集合 添加 事件 监听 器 。 
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initialize: function() { 
this.sel.html (this.template); 
this.collection.on('addToCart', this.showCart, this); 
jj 


在 前 一 节 里 对 于 事件 绑 定 我 们 已 经 有 所 讲解 。 本质 上 , 它 会 调用 homeVievw 的 showCart () 
方法 。 在 这 个 方法 里 ， 我 们 给 购物 车 添加 appleName， 同 时 添加 一 个 <br/> 元 素 : 


showCart: function(appleModel) { 
$s (this.cartEl) .append(appleModel .attributes.name+'<br/>'); 
3 








最 后 ， 是 我 们 期 待 已 久 的 render () 方 法 ,遍历 集合 里 的 每 一 个 模型 (苹果 )， 为 每 一 个 
苹果 创建 appleItemview， 创 建 <11> ， 添 加 到 view.1listEl (DOM 里 带 有 apples-list 
类 的 <ul> 元 素 ) : 





render: function(){ 
View = this; 
// 需 要 在 闭 包 里 访问 View 
this.collection.each(function(apple)f{ 
Var appleSubView = new appleItemView( {model:apple}); 
// 使 用 苹果 模型 创建 子 视图 
appleSubView.render(); 
// 使 用 单个 苹果 数据 渔 染 模板 
$ (view.listEl) .append(appleSubView.s$el); 
/ /把 泻 染 好 的 子 视图 里 的 jQuery 对 象 添加 到 苹果 列表 DOM 元 素 里 
3 











确保 没有 在 homeView Backbone View 里 遗漏 任何 事 





坦 
志 


Var homeView = Backbone.View.extend ({ 





el: 'body', 
listEl: '.apples-list', 
CartEl; "cart-box’, 
template: _.template('Apple data: \ 
<ul class="apples-list">\ 
</ul>\ 
<div class="cart-box"></div>'), 
initialize: function() { 


this.sel.html (this.template); 

this.collection.on('addToCart', this.showCart, this); 
js 
showCart: function(appleModel) { 

s(this.cartEl) .append(appleModel .attributes .name+'<br/>') : 
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}, 


render: function(){ 


上 
es 


}); 


View = this; // 需 要 在 闭 包 里 访问 View 
this.collection.each (function(apple)f{ 


var appleSubView = new appleItemView({model:apple}); 
// 使 用 苹果 模型 创建 子 视 图 
appleSubView.render () ; 

// 使 用 单个 苹果 数据 澄 染 模板 

$ (view.listEl) .append(appleSubView.s$el); 

// 把 泻 染 好 的 子 视图 里 的 jQuery 对 象 添加 到 革 果 列表 DOM 元 素 里 





现在 可 以 点 击 buy 按钮 购物 车 里 会 显示 你 的 选择 。 查 看 已 经 有 的 苹果 , 不 再 需要 在 浏览 器 
地 址 栏 里 输入 特定 的 网 址 ， 点 击 名 字 ， 详 细 视 图 会 在 新 窗口 里 展现 。 














模型 信息 











Apple data: 








子 视图 展示 的 苹果 列表 


通过 子 视图 ,我 们 重用 了 模板 , 并且 给 每 一 项 ( 苹果 ) 添加 事件 。 这 些 事 件 非 常 智 能 的 传递 
给 其 他 对 象 : 视图 及 集合 。 











这 个 例子 里 ， 完 整 的 子 视图 代码 可 以 从 rpjs/backbone/sub-view/index.html" 获取。 


«IDOCTYPE> 


<htmL> 
<head> 


<script src="jquery.js"></script> 
<script src="underscore.js"></script> 
<script src="backbone.js"></script> 


<script> 
Var appleData = [ 


name: "fuji", 
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Url img/fuji.jpog" 


name: "gala", 
url: "img/gala.jpg" 
} 
1 
Var app; 
Var router = Backbone.Router .extend ({ 
routes: { 
"": 'home', 
"apples/:appleName": "loadApple" 
js 
initialize: function(){ 
Var apples = new Apples(); 
apples.reset (appleData); 
this.homeView = new homeView({collection: apples}); 
this.appleView = new appleView({collection: apples}); 
js 
home: function(){ 
this.homeView.render(); 
js 
loadApple: function(appleName){ 
this.appleView.loadApple (appleName); 





} 

) 

Var appleItemView = Backbone.View.extend({ 
tagName: '1i', 


// template: _.templatel('' 

yh +'<a href="#apples/<%$=name®%>" target=" blank">'! 

// +'<%g=name%®>\ 

六 +'</a>&nbsp;<a class="add-to-cart" href="#">buy</a>'), 
template: _.template('\ 


<a href="#apples/<%=name%>" target="_blank">\ 
<%=name%®>\ 

</a>&nbsp;<a class="add-to-cart" href="#">buy</a>\ 
'), 


events: { 


'click .add-to-cart': 'addToCart' 
} 
render: function() { 

this.s$el.html (this.template(this.model.attributes)); 
js 


addToCart: function()t{ 
this.model.collection.trigger('addToCart', this.model); 
} 
站 


Var homeView = Backbone.View.extend ({ 
el: 'body', 
listEl: '.apples-list', 
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CartEl: '.cart-box', 
template: _.template('Apple data: \ 
<ul class="apples-list">\ 
</ul>\ 
<div class="cart-box"></div>'), 
initialize: function() { 


this.sel.html (this.template); 
this.collection.on('addToCart', this.showCart, this); 
}, 
showCart: function(appleModel) { 
$s (this.cartEl) .append(appleModel .attributes.name+'<br/>'); 
小 
render: function(){ 
View = this; 
// 需 要 在 闭 包 里 访问 View 
this.collection.each (function(apple)t{ 
var appleSubView = new appleItemView({model:apple}); 
// 使 用 苹果 模型 创建 子 视图 
appleSubView.render (); 
// 使 用 单个 苹果 数据 泻 染 模板 
$ (view.listEl) .append (appleSubView.s$el); 
// 把 泻 染 好 的 子 视图 里 的 jQuery 对 象 添加 到 苹果 列表 DOM 元 素 里 
} 








Var Apples = Backbone.Collection.extend({ 


Var appleView = Backbone.View.extendl({ 
initialize: function(){ 
this.model = new (Backbone.Model.extend({})); 
this.model.on('change', this.render, this); 
this.on('spinner',this.showSpinner, this); 
站 
template: _.template('<figure>\ 
<img src="<%= attributes.url%$>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'), 
templateSpinner: '<img src="img/spinner.gif" width="30"/>', 
loadApple:function(appleName){ 
this.trigger('spinner'); 
Var View = this; 
// 需 要 在 闭 包 里 访问 View 
setTimeout (function(){ 
/ /模拟 从 远程 服务 器 获取 数据 消耗 的 时 间 
view.model.set (view.collection.wherel({ 
name:appleName 
}) [0] .attributes); 
},1000); 
六 
render: function(appleName){ 
Var appleHtml = this.template(this.model); 
$s('body') .html (appleHtml); 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


4.5 重 构 87 





和 
showSpinner: function()f{ 
$('body') .html (this.templateSpinner); 
} 
有 


$s (document) .ready (function(){ 
app = new router; 
Backbone.history.start(); 


所 


</script> 
</head> 
<body> 

<div></div> 
</body> 
</html> 


单个 项 目的 链接 ， 比 如 collections/index.html#apples/fuji， 在 浏览 器 地 址 栏 里 输入 的 时 候 也 是 
能 正常 工作 的 。 


4.5 重 构 


这 个 时 候 你 可 能 会 好 奇 使 用 框架 , 同时 又 有 大 量 的 类 、 对 象 和 元 素 堆积 在 一 个 页 面 上 有 什么 
好 处 。 这 个 是 遵循 KISS (Keep it Simple Stupid ) 原则 ， 尽 可 能 的 使 事情 简单 。 

应 用 越 大 , 没有 组 织 的 代码 带 给 你 的 伤 痛 就 越 多 。 我 们 来 把 应 用 拆 分 成 多 个 文件 ,每 个 只 包 
含 下 面 的 一 种 类 型 : 
口 视图 
口 模板 
口 路 由 需 
口 集合 
口 模型 


在 index.html 里 写 和 人 script 标签 引入 拆 分 的 文件 : 


<script src="apple-item.view.js"></script> 
<script src="apple-home.view.js"></script> 
<script src="apple.view.js"></script> 
<script src="apples.js"></script> 

<script src="apple-app.js"></script> 


文件 名 不 是 必须 遵循 破 折 号 和 点 分 隔 ， 只 要 可 以 轻易 看 出 文件 的 职责 就 行 。 
现在 我 们 把 对 象 和 类 复制 到 正确 的 文件 里 。 
index.html 现在 看 起 来 非常 精简 : 
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<!DOCTYPE> 

<html> 

<head> 
SCript Sre="]JqUuery, J]JS">/SCr1iDt> 
<script src="underscore.js"></script> 
<script src="backbone.js"></script> 


<script src="apple-item.view.js"></script> 
<script src="apple-home.view.js"></script> 
<script src="apple.view.js"></script> 
<script src="apples.js"></script> 

<script src="apple-app.js"></script> 


</head> 
<body> 
<div></div> 
</body> 
</html> 


其 他 的 文件 只 需要 包含 与 其 文件 名 相符 的 代码 。 
apple-item.view.js 文件 内 容 : 





Var appleView = Backbone.View.extend ({ 
initialize: function() { 
this.model = new(Backbone.Model .extend({})); 
this.model.on('change', this.render, this); 
this.on('spinner', this.showSpinner, this); 
} 
template: _.template('<figure>\ 
<img src="<%= attributes.url %>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'), 
templateSpinner: '<img src="img/spinner.gif" width="30"/>', 


loadApple: function(appleName) { 
this.trigger('spinner'); 
var view = this; 
// 需 要 在 闭 包 里 访问 View 
setTimeout (function() { 
/ /模拟 从 远程 服务 器 获取 数据 消耗 的 时 间 
view.model.set (view.collection.wherel({ 
name: appleName 
}) [0] .attributes); 
},1000); 


}, 


render: function(appleName) { 
Var appleHtml = this.template(this.model); 
$('body') .html (appleHtml); 

站 7 

showSpinner: function() { 
$s('body') .html (this.templateSpinner); 
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apple-home.view.js 拥有 homeView 对 象 : 


Var homeView = Backbone.View.extend ({ 





el: 'body', 
listEl: '.apples-list', 
cartEl: '.cart-box', 
template: _.template('Apple data: \ 
<ul class="apples-list">\ 
SL 
<div class="cart-box"></div>'), 
initialize: function() { 


this.sel.html (this.template); 

this.collection.on('addToCart', this.showCart, this); 
js 
showCart: function(appleModel) { 

s(this.cartEl) .append(appleModel .attributes.name+'<br/>'); 





ja 
render: function(){ 
View = this; // 需 要 在 闭 包 里 访问 view 
this.collection.each(function(apple)t{ 
Var appleSubView = new appleItemView( {model:apple}); 
// 使 用 苹果 模型 创建 子 视图 
appleSubView.render (); 
// 使 用 单个 苹果 数据 泻 染 模板 
$ (view.listEl) .append(appleSubView.s$el); 
// 把 演 染 好 的 子 视图 里 的 jQuery 对 象 添加 到 苹果 列表 DOM 元 素 里 
3 








} 
js 


apple.view.js 包含 主要 的 苹果 的 列表 : 


Var appleView = Backbone.View.extend ({ 
initialize: function(){ 
this.model = new (Backbone.Model.extend({})); 
this.model.on('change', this.render, this); 
this.on('spinner',this.showSpinner, this); 
ys 
template: _.template('<figure>\ 
<img src="<%= attributes.url%>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'), 
templateSpinner: '<img src="img/spinner.gif" width="30"/>', 
loadApple:function(appleName)f{ 
this.trigger('spinner'); 
var view = this; 
// 需 要 在 闭 包 里 访问 View 
setTimeout (function(){ 
/ /模拟 从 远程 服务 器 获取 数据 消耗 的 时 间 
view.model.set (view.collection.wherel(t{ 
name:appleName 
}) [0] .attributes); 
L000) 
js 
render: function(appleName)f{ 
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var appleHtml = this.template(this.model); 
$s('body') .html (appleHtml); 
下 
showSpinner: function()f{ 
$('body') .html (this.templateSpinner); 
} 
} 


apple.js 是 一 个 空 集合 : 


Var Apples = Backbone.Collection.extend({ 
} 


apple-appjjs 是 应 用 的 主 文件 ， 包 含 数据 、 路 由 程序 和 启动 命 邻 : 


var appleData = [ 


4. 
name: "fuji", 
urlL: "Lind/Euji.jsg”" 
站 
name: "gala", 
url: "img/gala.jpg" 
} 
本 
Var app; 


Var router = Backbone.Routet .extend ({ 
routes: { 
'': 'home', 
'apples/:appleName': 'loadApple' 
7 
initialize: function(){ 
Var apples = new Apples(); 
apples.reset (appleData); 
this.homeView = new homeView({collection: apples}); 
this.appleView = new appleView({collection: apples}); 
}; 
home: function(){ 
this.homeView.render(); 
小 > 
loadApple: function(appleName)f{ 
this.appleView.loadApple (appleName); 
} 
Do 
$ (document) .ready (function()f{ 
app = new router; 
Backbone.history.start(); 


3} 

现在 打开 应 用 ， 它 看 起 来 应 该 和 之 前 的 子 视图 示例 一 模 一 样 。 

代码 组 织 已 经 改善 了 ,但 是 还 没有 到 完美 的 地 步 ,因为 HTML 模板 还 是 直接 放 在 了 JavaScript 
代码 里 。 这 个 导致 的 问题 就 是 设计 师 和 开发 者 不 能 在 同一 个 文件 上 工作 , 并 且 所 有 的 改变 都 需要 
改变 主要 的 代码 。 
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给 index.html 多 添加 几 个 JS 文 件 : 


<script src="apple-item.tpl.js"></script> 
<script src="apple-home.tpl.js"></script> 
<script src="apple-spinner.tpl.js"></script> 
<script src="apple.tpl.js"></script> 


一 般 一 个 Backbone 视图 使 用 一 个 模板 , 在 applevView 里 , 苹果 的 详细 视图 里 , 还 有 一 个 加 
载 图 (Spinner ) 和 一 个 加 载 中 的 动画 ( GIF )。 

这 些 文件 的 内 容 是 一 些 赋 值 了 字符 串 的 全 局 变量 。 稍 后 在 视图 里 使 用 Underscore.js 的 
_.template() 方 法 时 可 以 使 用 这 些 变量 。 


apple-item.tpl.js 的 内 容 : 





Var appleItemTpl = '\ 
<a href="#apples/<%=name%>" target="_blank">\ 
<%=name%®>\ 
</a>g&nbsp;<a class="add-to-cart" href="#">buy</a>\ 


和 
’ 


apple-home.tpl.js 的 内 容 : 





Var appleHomeTpl = 'Apple data: \ 
<ul class="apples-list">\ 
</ul>\ 


<div class="cart-box"></div>';} 


apple-spinner.tpl.js: 


Var appleSpinnerTpl = '<img src="img/spinner.gif" width="30"/>'; 
apple.tpljs 文件 : 
Var appleTpl = '<figure>\ 


<img src="<%= attributes.url %>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'; 


尝试 打开 这 个 应 用 。 完 全 的 代码 在 rpjs/backbone/refactor "目录 下 。 
就 像 之 前 的 例子 一 样 ， 我 们 使 用 了 全 局 作用 域 变 量 ( 没有 使 用 关键 字 window )。 











警告 

A 当 你 在 全 局 作用 域 里 使 用 很 多 变量 时 ， 需 要 小 心 。 有 可 能 产生 冲突 和 不 可 预测 
的 问题 。 例 如 ， 如 果 你 写 了 一 个 开源 库 ， 其 他 开发 人 员 直 接 使 用 方法 和 属性 ， 
而 不 是 接口 ,那么 最 后 你 决定 怎么 删除 和 修改 那些 全 局 变量 ? 为 了 防止 这 样 的 
问题 发 生 ， 正 确 的 写 库 和 应 用 方式 是 使 用 JavaScript 闭 包 ”。 





GD https://github.com/azat-co/rpjs/tree/master/backbone/refactor 
@) https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures 
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使 用 闭 包 和 全 局 变量 模块 定义 : 


(function() { 
Var apple= function() { 
. ..// 做 一 些 有 意义 的 事情 ， 
过 
window.Apple = 
i 


apple; 


比如 返回 一 个 苹果 对 象 


或 者 当 我 们 需要 访问 一 个 app 对 象 时 ， 在 这 个 对 象 上 创建 依赖 : 


(funetion() 4 
var app = this.app; 
/ /等 价 于 window.appliation 
// 以 防 有 依赖 (app) 
this.apple = function() { 
...// 返 回 革 果 对 象 (类 ) 
// 使 用 app 变量 
} 
// 等 价 于 window.apple = 
}()) 


如 你 所 见 ， 创 建 一 个 匿名 函数 并 且 立 即 执行 ， 





4.6 ”开发 时 的 AMD 和 Require.js 


Funcetiont() .> 


把 所 有 的 东西 包 囊 在 圆 括号 () 里 。 


AMD 人 允许 我 们 把 开发 代码 组 织 成 模块 ， 管 理 它 们 的 依赖 ， 异 步 加 载 它们 。 这 里 有 一 篇 文章 


解释 了 为 什么 AMD 是 个 好 玩意 : WHY AMD?"。 


启动 你 的 本 地 HTTP 服务 器 ， 比 如 MAMP? 。 


index.html 精简 成 这 样 : 

<JDGCIYPE> 

<html> 

<head> 
Cript Sre="Jauery.Je"></SCript> 
<SCript sro="WUnderscore,. Je"></SCript> 
<script src="backbone.js"></script> 
<Suript Sre="re0Uire.JS"S</SCriGt> 
<script src="apple-app.js"></script> 

</head> 

<body> 
<div></div> 

</body> 

</html> 





QD http://requirejs.org/docs/whyamd.html 
© http:/www.mamp.info/en/index.html 
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只 包含 库 文件 和 应 用 的 一 个 文件 。 这 个 文件 结构 如 下 所 示 : 
require([...],function(...){...}); 


说 明 性 更 强 的 展示 : 





requirel( 
'name-of-the-module', 


'name-of-the-other-module' 
] ,function(referenceToModule, ..., referenceToOtherModule){ 


...// 一 些 有 用 的 代码 
referenceToModule.someMethod(); 
上 


简单 来 讲 ， 我 们 通过 require () 函数 的 第 一 个 参数 以 一 个 数组 形式 告诉 浏览 器 我 们 需要 加 
载 的 文件 列表 ， 把 这 些 文件 里 的 模块 传递 给 匿名 回调 函数 作为 参数 。 在 主 函 数 ( 匿名 回调 函数 ) 
我 们 可 以 使 用 这 些 模块 的 引用 。 因 此 ， 我 们 的 apple-appjs 变形 成 了 : 








zecuire([ 
'apple-item.tpl'，// 可 使 用 shim 插件 
'apple-home.tpl', 
'apple-spinner.tpl', 
'apple.tpl', 
'apple-item.view', 
'apple-home.view', 
'apple.view', 
'apples' 
J].-funetiont 
appleItemTpl, 
appleHomeTpl1, 
appleSpinnerTpl, 
appleTpl, 
appelItemView, 
homeView, 
appleView, 
Apples 
){ 
Var appleData = [ 
{ 
name: "fuji", 
url: "img/fuji.jpg" 
和 
{ 
name: "gala", 
url: "img/gala.jpg" 
} 
| 
Var app; 
Var router = Backbone.Router .extend ({ 
/ /检查 是 否 需 要 引入 


routes: { 


图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


94 第 4 章 Backbonejs 





'': 'home', 
‘'apples/:appleName': 'loadApple' 
} 
initialize: function(){ 
Var apples = new Apples(); 
apples.reset (appleData); 
this.homeView = new homeView({collection: apples}); 
this.appleView = new appleView({collection: apples}); 
}, 
home: function()f{ 
this.homeView.render(); 
于 
loadApple: function(appleName){ 
this.appleView.loadApple (appleName); 


} 
过 


$ (document) .*eadqy(Eunction(){ 
app = new router; 
Backbone.history.start(); 
} 
3 


我 们 把 所 有 的 代码 放 在 require() 的 第 二 个 参数 的 函数 里 ,通过 文件 名 引入 它们 ， 通 过 相 
应 的 参数 使 用 依赖 关系 。 现 在 可 以 定义 模块 本 身 了 ,我们 使 用 aefine () 方 法 : 


define( [sw] function(::){ }) 


这 和 reauire() 函数 相似 : 依赖 以 一 个 字符 串 数组 的 形式 传人 第 一 个 参数 。 第 二 个 参数 是 
一 个 接收 别 的 库 作为 参数 的 方法 ， 参 数 的 顺序 和 数组 里 的 模块 很 重要 : 
define(['name-of-the-module'],function(nameOfModule)t{ 
var b = nameOfModule.render (); 


return b; 


} 
































注意 
@ 不 必 给 文件 名 添加 .js，Require.js 会 自动 添加 。shim 插件 可 以 用 来 导入 文本 文 
件 作 为 模板 。 


现在 开始 处 理 模 板 ， 把 它们 转换 成 Requirejjs 模块 。 
新 的 apple-item.tpl.js 文件 : 


define(function() { 
return '\ 
<a href="#apples/<%=name%>" target="_blank">\ 
<%$=name%®>\ 
</a>&nbsp;<a class="add-to-cart" href="#">buy</a>\ 
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apple-home.tpljs 文件 : 


define(function(){ 
return 'Apple data: \ 
<ul class="apples-list">\ 
ALS 
<div class="cart-box"></div>';} 


}); 
apple-spinner.tpl.js 文件 : 


define(function(){ 
return '<img src="img/spinner.gif" width="30"/>'; 


}); 
apple.tpljs 文件 : 


define(function(){ 
return '<figure>\ 
<img src="<%= attributes.url %>"/>\ 
<figcaption><%= attributes.name %></figcaption>\ 
</figure>'; 


))3 





apple-item.view.js 文件 : 


define(function() { 
return '\ 
<a href="#apples/<%=name%>" target="_blank">\ 
<%=name%®>\ 
</a>&nbsp;<a class="add-to-cart" href="#">buy</a>\ 


}); 
在 apple-home.view.js 文件 里 ,需要 声明 它 依赖 apple-home.tpl 和 apple-item.viewjs 文件 : 


define(['apple-home.tpl', 'apple-item.view'], functionl( 
appleHomeTpl1, 
appleItemView) { 

return Backbone.View.extendl({ 





el: 'body', 

listEl: '.apples-list', 

CartRlsy "cartabor., 

template: _.template(appleHomeTpl1), 
initialize: function() { 


this.sel.html (this.template); 

this.collection.on('addToCart', this.showCart, this); 
js 
showCart: function(appleModel) { 

$s (this.cartEl) .append(appleModel.attributes.name + '<br/>'); 
js 
render: function() { 

view = this; // 需 要 在 闭 包 里 访问 view 
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this.collection.each(function(apple) { 
Var appleSubView = new appleItemView({ model: apple }); 
// 使 用 苹果 模型 创建 子 视图 
appleSubView.render (); 
// 使 用 单个 苹果 数据 泻 染 模板 
$ (view.listEl) .append (appleSubView.s$el); 
/ /把 泻 染 好 的 子 视图 里 的 jQuery 对 象 添加 到 苹果 列表 DOM 元 素 里 
用: 








这 
} 


apple.view.js 依赖 两 个 模板 : 


define([ 
'apple.tpl', 
'apple-spinner.tpl' 
], function(appleTpl, appleSpinnerTpl) { 
return Backbone.View.extend({ 
initialize: function() { 
this.model = new(Backbone.Model .extend({})); 
this.model.on('change', this.render, this); 
this.on('spinner', this.showSpinner, this); 
} 
template: _.template(appleTpl1), 
templateSpinner: appleSpinnerTp1， 
loadApple: function(appleName) { 
this.trigger('spinner'); 
var view = this; 
// 需 要 在 闭 包 里 访问 View 
setTimeout (function() { 
/ /模拟 从 远程 服务 器 获取 数据 消耗 的 时 间 
view.model.set (view.collection.wherel({ 
name: appleName 
}) [0] .attributes); 
}, 1000); 
Fy 
render: function(appleName) { 
Var appleHtml = this.template(this.model); 
$s('body') .html (appleHtml); 





Be 
showSpinner: function() { 
$s('body') .html (this.templateSpinner); 
= 
二 之 
})3 
apple.js 文件 : 


define(function(){ 
return Backbone.Collection.extend({}) 
hy 
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我 希望 你 已 经 看 到 这 个 模式 了 。 所 有 的 代码 基于 逻辑 分 离 到 不 同 的 文件 里 ( 比如 视图 类 、 集 
合 类 、 模 板 )。 0 require() 方 法 加 载 所 有 的 依赖 。 如 果 在 非 主 文件 里 需要 加 载 一 些 文 
件 , 在 aefine() 里 请 求 它 们 。 一 般 在 模块 里 我 们 返回 一 个 对 象 ， 例 如 在 模板 里 我 们 返回 一 个 字 

符 串 ， 在 视 回 Backbone View 类 。 


尝试 打开 rpjs/backbone/amd" 里 例子 。 展 现 上 不 会 有 任何 变化 。 如 果 打 开 开 发 者 工具 的 
Network ( 网络 ) 面板 ， 可 以 看 到 文件 加 载 的 不 同 。 旧 的 rpjs/backbone/refactor/index.html” 串 行 加 
载 JS 脚 本， 新 的 rpjs/backbone/amd/index.html? 并 行 加 载 JS 脚本 。 








Apple data: 
e fuj buy 
9 gala byy 
Bemenes Resources PNetworm | Sources Timeline Proffes Audits Console 
Name Seatus Size Time 
Path Method Text Type aliaser Content | Litency | Timeline hm 0m Mm ai6ms pms 
i 2 4 
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a -view. 
pple. e 3 | -= 200 ao de hsm 12x8 iims 
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— poclpopkcdbaef ee < 人 ma [CET OK maga/png Seript Nom eu Oms - 
Nudge-icon-arrow-down.png 二 20 imaoe/nno Perewii4h ee Oms 
Da 9 0 | Docoments Syesheets Images Scripts WHR Fonts WebSockets Other 





老 的 rpjs/backbone/refactor/index.html 文件 





GD https://github.com/azat-co/rpjs/tree/master/backbone/amd 
© https://github.com/azat-co/rpjs/blob/master/backbone/refactor/index.html 
@® https://github.com/azat-co/rpjs/blob/master/backbone/amd/index.html 
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Timeline 


Profles Avdits Console 
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新 的 rpjs/backbone/amd/index.html 文件 


9 ms 


ms 


Bigms 


WIms 





‘477ms 


Require.js 可 以 通过 在 requirejs .config()HTML 页 面 顶部 调用 定义 配置 。 更 多 信息 可 以 


查阅 : requirejs.org/docs/api.html#config”。 


我 们 来 给 这 个 例子 添加 时 间 戳 ， 时 间 戳 会 添加 到 每 个 URL 之 后 防止 浏览 顺 缓 存 。 这 种 方式 
在 开发 阶段 非常 棒 , 但 是 在 线 上 产品 中 是 一 个 非常 糟糕 的 主意 ( 线 上 产品 就 尽 可 能 使 用 浏览 需 缓 


存 )。 


在 apple-appjs 文件 开始 的 地 方 添加 : 


requirejs.config({ 
urlArgs: "bust=" + 
} 


require(I[ 





GD http://requirejs.org/docs/api.html#config 





(new Date()) .getTime() 
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Appis data: 


e fll buy 
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添加 了 时 间 戳 的 网 络 面板 
可 以 看 到 所 有 的 请 求 现在 状态 码 都 是 200 而 不 是 304〈 没 有 修改 )。 


4.7 生产 环境 里 的 Require.js 


使 用 NPM ( Node Package Manager ) 安装 requirejs 库 ， 在 你 的 项 目 目录 里 ， 或 者 在 终端 里 运 
行 这 个 命令 

$ npm install requirejs 
或 者 添加 -g 作为 全 局 安装 : 

$ npm install -g requirejs 


创建 app.build.js 文件 : 


({ 
appDirs ™,/js"; 
baseUrl: "./", 
dirs build™, 
modules: [ 
{ 
name: "apple-app" 
} 
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把 这 个 脚本 文件 移 到 js 目录 , 对 应 的 是 appDir 属性 。 生 成 的 文件 会 放 在 build 目录 , 对 应 
的 是 dir 参数 。 更 多 关于 生成 文件 , 查看 这 个 使 用 了 很 多 功能 带 有 注释 的 文件 : https://github.com/ 


Jrburke/r.js/blob/master/build/example.buil 
现在 所 有 的 准备 就 绪 ， 我 们 可 以 生 


$ r.js -o app.build.js 


或 者 : 








d.js。 
成 一 个 大 JS 文件 ， 它 包含 了 所 有 的 依赖 和 模块 : 





$ node modules/requirejs/bin/r.js -o app.build.js 


这 会 显示 出 rjs 处 理 的 文件 列表 。 








rjs 处 理 的 文件 列表 


从 build 目录 打开 index.html， 查 看 








Network 面板 ， 你 可 以 看 到 只 有 一 个 请 求 文件 。 
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。 fh buy 
。» gala buy 
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寸 只 加 载 一 个 文件 增强 性 能 
更 多 信息 可 以 查阅 官方 的 rjs 文档 : requirejs.org/docs/optimization.html”。 








示例 代码 在 rpjs/backbone/r* 和 rpjs/backbone/r/build” 目 录 里 。 


为 了 减 小 文件 大 小 , 我 们 压缩 文件 , 使 用 Uglify2" 模 块 完 成 这 个 任务 。 使 用 NPM 来 安装 它 


$ npm install uglify-js 


更 新 app.buildjs 文件 ， 添 加 一 个 optimize:"uglify2" 属 


({ 


性 : 





appDir; ™,/js", 
baseUrl: "./", 
dlr "Build", 
optimize: "uglify2", 
modules: [ 

{ 


name: "apple-app" 





GD http://requirejs.org/docs/optimization.html 

©® https://github.com/azat-co/rpjs/tree/master/backbone/r 

@® https://github.com/azat-co/rpjs/tree/master/backbone/r/build 
(@ https://github.com/mishoo/UglifyJS2 
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a 
运 们 JS: 
$ node modules/requirejs/bin/r.js -o app.build.js 


现在 得 到 的 将 会 是 : 


define("apple-item.tpl",[],function() {return' < href="#apples/<%=name%®>" 
target="_blank"> <%$=name%®> </a>&nbsp;<a class="add-to-cart" 
href="#">buy</a> '}),define("apple-home.tpl",[],function() {return'Apple data: 
<ul class="apples-list"> </ul> <div class="cart-box"></div>'}),define 
("apple-spinner.tpl",[],function() {return'<img src="img/spinner.gif" width="30"/>'}), 
define("apple.tpl",[],function() {return'<figure> <img src="<%= 
attributes.url%>"/> <figcaption><%= attributes.name %></figcaption> 

</figure>'}),define("apple-item.view", ["apple-item.tpl"], 


functionl(e) {return Backbone.View.extend({tagName:"l1li", template:_.templatel(e),events: 

{"click .add-to-cart":"addToCart"},render:function(){this.s$sel.html (this.templatel(t 
his.model.attributes))},addToCart:function(){this.model.collection.trigger ("addToC 

art",this.model)}})}),define("apple-home.view", ["apple-home.tpl","apple-item.view" 

], functionl(e,t) {return Backbone.View.extend({el: "body",1listEl:".apples-list",cartEl: 
".cart-box", template:_.template(e),initialize:function() {this.s$el.html (this.template), 
this.collection.on("addToCart",this.showCart, this)},showCart:function(e) {$ (this.cartEl 
) .append (e.attributes.name+"<br/>")},render:function() {view=this,this.collection.each!( 
function(e){var i=new t({model:e});i.render(),s$(view.listEl) .append(i.s$el)})}})}), 

define ("apple.view",["apple.tpl","apple-spinner.tpl"],function(e,t) {return Backbone. 

View.extend({initialize:function() {this.model=new (Backbone.Model.extend({})),this. 

model.on("change",this.render,this),this.on("spinner",this.showSpinner, this)},temp 

late:_.template(e),templateSpinner:t,1loadApple:function(e) {this.trigger ("spinner"); 
Var t=this;setTimeout (function(){t.model.set(t.collection.where({name:e}) [0] .attributes)}, 

le3)},render:function(){var e=this.template(this.model);$ ("body") .html (e)},showSpinner: 
function(){$("body") .html (this.templateSpinner)}})}),define("apples",[],function() 

{return Backbone.Collection.extend({})}),requirejs.config({urlArgs:"bust="+(new Date). 

getTime()}),require(["apple-item.tpl","apple-home.tpl","apple-spinner.tpl","apple. 

tpl","apple-item.view","apple-home.view","apple.view","apples"],functionl(e,t,i,n,a, 
l,p,o){var r,s=[{name: "fuji",url:"img/fuji.jpg"}, {name:"gala",url:"img/gala.jpg"}], 
C=Backbone.Router.extend({routes:{"":"home","apples/:appleName":"loadApple"},initi 

alize:function(){var e=new o;e.reset(s),this.homeView=new 1l1({collection:e}),this. 

appleView=new pl{collection:e})},home:function() {this.homeView.render()},1oadApple: 

function(e) {this.appleView.loadApple(e)}});s$ (document) .ready (function() {r=new c,Backbone. 

history.start()})}),define("apple-app",function(){}); 


注意 
为 了 展示 Uglify2 是 怎么 工作 的 ， 这 个 文件 没有 格式 化 。 在 没有 续 行 符 的 情况 
下 ， 这 段 代 码 是 一 行 。 ee 意 ， 变量 和 对 象 名 也 压缩 了 。 











4.8 简单 好 用 的 Backbone 脚手架 工具 


快速 开始 Backbone.js 开发 ， 可 以 考虑 使 用 Super Simple Backbone Starter Kit" 或 者 类 似 的 项 





GD https://github.com/azat-co/super-simple-backbone-starter-kit 
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口 Backbone Boilerplate® ; 

口 Sample App with Backbone.js and Twitter Bootstrap2 ; 

口 更 多 有 关 Backbone.js 的 教程 可 以 浏览 github.com/documentcloud/backbone/wiki/Tutorials% 
2C-blog-posts-and-example-sites* 获取 。 











人 http://backboneboilerplate.com/ 
@) http://coenraets.org/blog/2012/02/sample-app-with-backbone-js-and-twitter-bootstrap/ 
@® https://github.com/documentcloud/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites 
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Backbone.js 和 Parse.com 











提要 : 使 用 Parse.com 和 它 的 JavaScript SDK 在 修改 后 的 Chat 应 用 上 试验 Backbone.js; 建 
添加 的 功能 列表 。 


议 


| 一 一 克 里 斯 海尔 曼 " 
如 果 你 已 经 写 过 一 些 复杂 的 客户 端 程序 ,会 发 现 维护 JavaScript 回调 函数 与 UI 事件 混杂 在 
人 挑战 性。Backbone.js 提供 了 一 个 轻 量 是 强大 的 方式 ， 用 于 把 逻辑 代码 组 织 成 MVC 
结构 。 它 同样 有 一 些 特别 棒 的 功能 ， 如 URL 路 由 选择 、REST API 支 持 、 事 件 监 听 需 与 触发 融 。 
更 多 关于 从 头 开 始 构建 Backbone.js 应 用 的 信息 和 详细 例子 ， 请 参考 第 4 章 。 


可 以 从 backbonejs.org2 下 载 Backbone.js 库 。 然后 ， 像 其 他 JavaScript 一 样 在 HTML 页 面 的 顶 
端 或 者 正文 中 引入 它 ， 你 就 可 以 使 用 Backbone 类 。 例 如 ,创建 路 由 程序 : 


Var ApplicationRouter = Backbone.Router .extend ({ 
routes: { 

















Li home nh 
"Lgnup": veLgnue., 
"*actions": "home" 
i 
initialize: function () { 


this.headerView = new HeaderView!(); 
this.headerView.render (); 
this.footerView = new FooterView!(); 
this.footerView.render (); 

} 

home: function () { 
this.homeView = new HomeView(); 
this.homeView.render(); 

} 


signup: function () { 


} 
J 





(WY http://christianheilmann.com/ 
© http://backbonejs.org 
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视图 、 模 型 和 集合 以 同样 的 方式 创建 : 


HeaderView = Backbone.View.extend ({ 
el: "#header", 
template: '<div>...</div>', 
events: { 
"Click #save": "saveMessage" 
js 
initialize: function () { 
this.collection = new Collection(); 
this.collection.bind("update", this.render, this); 
} 


saveMessage: function () { 


js 
render: function () { 
s(this.el) .html(_.template(this.template)); 


} 
上 


Model = Backbone.Model.extend({ 
url: "/api/item" 


} 
Collection = Backbone.Collection.extend({ 


}); 
更 多 关于 Backbone.js 的 细节 ， 请 参考 第 4 章 。 
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显而易见 ， 如 果 继 续 添 加 越 来 越 多 的 像 “DELETE”“UPDATE” 这 样 的 按钮 ,我 们 的 系统 里 
异步 回调 会 变 得 越 来 越 复杂 。 同 时 ， 我们 必须 知道 什么 时 候 更 新 视图 ， 即 消息 列表 ,这 取决 于 数 
据 是 否 改 变 。 使 用 Backbone.js 的 MVC 框架 更 易 管理 与 维护 复杂 应 用 。 





如 果 你 感觉 前 一 个 例子 比较 轻松 , 让 我 们 在 此 基础 之 上 , 使 用 Backbonejs 框架 继续 搭建 它 。 
我 们 将 一 步 一 步 的 使 用 Backbone.js 和 Parse.com 的 JavaScript SDK 创建 Chat 应 用 ,如 果 你 感觉 已 
经 很 熟悉 了 ， 可 以 下 载 Backbone.js 的 脚手架 工具 : github.com/azat-co/super-simple-backbone- 


starter-kit 。 集 成 Backbone.js 后， 可 以 直接 把 用 户 操作 的 异步 更 新 集合 绑 定 起 来 。 
这 个 应 用 在 rpjs/sdk” 可 以 获取 , 但 我 们 还 是 建议 你 从 头 开 始 写 代 码 , 示例 代码 仅仅 作为 参考 。 
下 面 是 使 用 了 Parse.com 的 Chat 的 目录 结构 : 








GD https://github.com/azat-co/super-simple-backbone-starter-kit 
© https://github.com/azat-co/rpjs/tree/master/sdk 
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/sdk 
-index.html 
-home.html 


-footer.html 

-header .html 

-app.js 

/css 
-bootstrap-responsive.css 
-bootstrap-responsive.min.css 
-bootstrap.css 
-bootstrap.min.css 

/img 
-glyphicons-halflings-white.png 
-glyphicons-halflings.png 

/js 
-bootstrap.js 
-bootstrap.min.js 

/libs 
-require.min.js 
-text.js 


创建 一 个 文件 夹 ， 在 这 个 文件 侠 里 创建 index.html， 输 入 下 面 的 内 容 : 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 
<body> 
/Da 
</html> 
下 载 必须 的 库 或 者 使 用 Google API 上 的 链接 。 现 在 在 nead 元 素 里 引入 JavaScript 库 代 码 和 
Twitter Bootstrap 样式 表 ， 同 时 写 上 一 些 重要 但 是 不 是 必需 的 meta 元 素 。 











<head> 
<meta charset="utf-8"/> 
<title></title> 
<meta name="description" content=""/> 
<meta name="author" content=""/> 

为 响应 式 做 好 准备 : 


<meta name="viewport" 
content="width=device-width, initial-scale=1.0" /> 


从 Google API 引入 jQuery : 
<script type="text/javascript" 


src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
</SCript> 


引入 Twitter Bootstrap 插件 : 
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<script type="text/javascript" src="js/bootstrap.min.js"></script> 
从 Parse.com CDN 引入 Parse JavaScript SDK : 


<script type="text/javascript" 
src="http://ww.parsecdn.com/js/parse-1.0.5.min.js"> 
</SCEiDtS 


引入 Twitter Bootstrap 的 CSS 样式 文件 : 


<link type="text/css" 
rel="stylesheet" 
href="css/bootstrap.min.css" /> 

<link type="text/css" 
rel="stylesheet" 
href="css/bootstrap-responsive.min.css" /> 


引入 我 们 的 JS 应用: 


<script type="text/javascript" src="app.js"></script> 


</head> 
给 body 元 素 添上 Twitter Bootstrap 的 支架 内 容 ( 详情 请 参考 第 1 章 ): 
<body> 


<div class="container-fluid"> 
<div class="row-fluid"> 
<div class="spanl2"> 
<div id="header"> 
</div> 
</div> 
</div> 
<div class="row-fluid"> 
<div class="spanl2"> 
<div id="content"> 
</div> 
</div> 
</div> 
<div class="row-fluid"> 
<div class="spanl2"> 
<div id="footer"> 
</div> 
</div> 
</div> 
</div> 
</body> 


创建 app.js 同时 把 Backbonejs 的 视图 加 入 。 
口 neaderView: 菜单 和 应 用 一 般 信息 。 


口 footerView: 版 权 和 联系 信息 。 
口 nomeView: 主页 内 容 。 
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使 用 Require.js 语法 和 shim 插件 加 载 HTML 模板 : 


require(I[ 
'libs/text!header.html', 
'libs/text!home.html', 
‘libs/text!footer.html'], 
headerTp]l, 

homeTpl, 

footerTpl) { 





function ( 


应 用 的 路 由 程序 只 有 一 个 首页 路 由 : 


Var ApplicationRouter = Backbone.Router .extend (1{ 
routes: { 


nh home Li 
"*actions": "home" 


}, 


在 开始 做 别 的 事情 之 前 ， 把 视图 初始 化 一 下 ， 以 便 在 整个 应 用 里 使 用 : 
initialize: function () { 


this.headerView = new HeaderView!(); 
this.headerView.render (); 
this.footerView = new FooterView!(); 


this.footerView.render(); 
ey 


首页 路 由 的 处 理 代码 : 


home: function () { 
this.homeView = new HomeView(); 
this.homeView.render (); 
} 
下 


头 部 视图 会 添加 到 #header 元 素 ， 并 且 使 用 模板 headerTpl: 


HeaderView = Backbone.View.extend ({ 
el: "#header", 


templateFileName: "header.html", 

template: headerTp]l, 

initialize: function () { 

} 

render: function () { 
console.log(this.template) 

s(this.el) .html(_.template(this.template)); 





} 
于 这 


使 用 jQuery .html 函数 泻 染 HTML : 
FooterView = Backbone.View.extend ({ 
el: "#footer", 


template: footerTpl, 
render: function () { 
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this.s$sel.html(_.template(this.template)); 
} 
}); 


首页 视图 定义 使 用 #content DOM 元 素 : 


HomeView = Backbone.View.extend({ 
el: "#content", 
// template: "home.htmil" 
template: homeTpl， 


initialize: function () { 
js 
render: function () { 
s(this.el) .html(_.template(this.template)); 
} 


让 
创建 一 个 新 的 实例 ， 调 用 Backbone .history.start() 启 动 应 用 : 


app = new ApplicationRouter(); 
Backbone.history.start(); 
) 


完整 的 app.js 的 代码 : 


require(I[ 

'libs/text!header.html', 

//shim 插件 使 用 示例 

'libs/text!home.html', 

"Tibs/textl!footer .html’l; fiunetion 

headerTp]l, 

homeTpl, 

footerTpl) { 

Var ApplicationRouter = Backbone.Router .extend ({ 

routes: { 





"": "home", 
"*actions": "home" 
ss 
initialize: function () { 


this.headerView = new HeaderView!(); 
this.headerView.render(); 
this.footerView = new FooterView!(); 
this.footerView.render(); 
ja 
home: function () { 
this.homeView = new HomeView(); 
this.homeView.render(); 
} 
3 
HeaderView = Backbone.View.extend({ 
el: "#header", 
templateFileName: "header.html", 
template: headqerTp1， 
Ftializer Funcetiorn 人 () { 


] ， 
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render: function () { 
console.log(this.template) 
s(this.el) .html(_.template(this.template)); 
} 
$3 


FooterView = Backbone.View.extend ({ 
el: "#footer", 
template: footerTpl, 
render: function () { 
this.s$sel.html(_.template(this.template)); 
} 
} 
HomeView = Backbone.View.extendq({ 
el: "#content", 
// template: "home.html" 
template: homeTpl, 
initialize: function () { 
5 
render: function () { 
s(this.el) .html(_.template(this.template)); 
} 
站 
app = new ApplicationRouter(); 
Backbone .history.statt() ， 
过 


上 面 是 代码 展示 模板 。 所 有 的 视图 和 路 由 程序 都 包含 在 内 ， 提 前 加 载 模板 ， 确 保 我 们 开始 泻 
染 的 时 候 它 们 已 经 准备 好 了 。 


home.html 看 起 来 是 这 样 的 : 


口 表格 展示 的 消息 ; 
口 Underscore.js 输出 表格 的 行 ; 
口 新 消息 表单 。 


我 们 使 用 Twitter Bootstrap 库 的 结构 ( 带 有 响应 式 组 件 )， 添 加 row-fluid 和 span12 类 : 


<div class="row-fluid" id="message-board"> 
<div class="spanl2"> 
<table class="table table-bordered table-striped"> 
<caption>Chat</caption> 
<thead> 
芝 让 > 
<th class="span2">Username</th> 
<th>Message</th> 
</tr> 
</thead> 
<tbody> 


下 面 简单 介绍 一 下 Underscore,js 的 模板 ， 它 把 JS 代码 包 于 在 <$ 和 %> 标 记 里 。_.each 是 一 
个 Underscore.js 库 ( underscorejs.org/#each” ) 里 的 迭代 函数 ， 就 像 它 的 名 字 展 现 的 那样 ， 它 遍历 




















QD http://underscorejs.org/#each 
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数组 和 对 象 。 


<% if (models.length>0) { 
_.each (models, function (value,key, list) { %> 
<t¥F> 
<td><%= value.attributes.username %></td> 
<td><%= value.attributes.message %></td> 
< /E> 
<% }); 
} 
else { 多 > 
a 
<td colspan="2">No messages yet</td> 
< /EE 
<%$}%> 
</tbody> 
</table> 
</div> 
</div> 


新 消息 表单 ， 我 们 使 用 row-f1luid 类 ， 然 后 添加 input 元 素 : 


<div class="row-fluid" id="new-message'"> 
<div class="spanl2"> 
<form class="well form-inline"> 

<input type="text" 
name="username" 
class="input-small" 
placeholder="Username"/> 

<input type="text" name="message" 
class="input-small" 
placeholder="Message Text"/> 

<a id="send" class="btn btn-primary">SEND</a> 





</form> 
</div> 
/加 于 Vs 


完整 的 home.html 模板 代码 : 


<div class="row-fluid" id="message-board"> 
<div class="spanl2"> 
<table class="table table-bordered table-striped"> 
<caption>Chat</caption> 
<thead> 
tt 
<th class="span2">Username</th> 
<th>Message</th> 
</tr> 
</thead> 
<tbody> 
<% if (models.length>0) { 
_.each (models, function (value,key, list) { %> 
tt 
<td><%= value.attributes.username %></td> 
<td><%= value.attributes.message %></td> 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


112 第 5 章 ”Backbone.js 和 Parse.com 





/EE 
< ) 7 
} 
else { %> 
过 龙 于 和 
<td colspan="2">No messages yet</td> 
</ Er 
<%$}%> 
</tbody> 
</table> 
</div> 
</div> 
<div class="row-fluid" id="new-message"> 
<div class="spanl2"> 
<form class="well form-inline"> 
<input type="text" 
name="username" 
class="input-small" 
placeholder="Username"/> 
<input type="text" name="message" 
class="input-small" 
placeholder="Message Text"/> 
<a id="send" class="btn btn-primary">SEND</a> 


</form> 
</div> 
</div> 
现在 来 添加 下 面 的 组 件 : 


口 Parse.com 集合 ; 

口 Parse.com 模型 ; 

口 发 送 或 添加 消息 事件 ; 
口 获取 /展示 消息 函数 。 

















让 








可 以 通过 使 用 Parse.com SDK 强制 添加 一 个 className 属性 来 适应 Backbone 如 
/类 。( 这 个 属性 是 通过 Parse.comWeb 接口 的 Data Browser 看 到 的 集合 名 。) 


Message = Parse.0Object.extend({ 
className: "MessageBoard" 


























}); 
Backbone 集合 与 Parse.com JavaScript SDK 对 象 兼 容 ， 使 它 指 向 模型 ; 


MessageBoard = Parse.Collection.extend ({ 
model: Message 





bs 
首页 视图 需要 有 一 个 监听 器 监听 “SEND” 按 钮 的 点 击 : 


HomeView = Backbone.View.extend({ 
el: "#content", 
template: homeTpl, 
events: { 
"click #send": "saveMessage" 





}, 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


容 模型 对 象 


5.1 使 用 Parse.com 的 Chat: JavaScript SDK 和 Backbone.js 版 本 113 








当 创 建 homeview 视图 的 时 候 ， 同 时 创建 一 个 集合 并 且 给 它 附加 事件 监听 器 : 


initialize: function () { 
this.collection = new MessageBoard(); 
this.collection.bind("all", this.render, this); 
this.collection.fetch(); 
this.collection.on("add", function (message) { 
message.save(null, { 
success: function (message) { 
console.log('saved ' + message); 
Fs 
error: function (message) { 
console.log('error'); 


3 
console.log('saved' + message); 
})) 
js 


“SEND” 按 钮 被 点 击 时 调用 saveMessage(): 


saveMessage: function () { 
Var newMessageForm = $("#new-message"); 
Var username = newMessageForm. 
find(' [name="username"]'). 
attr('value'); 
Var message = newMessageForm.find(' [name="message"]'). 
find(' [name="message"]'). 
attr('value'); 
this.collection.add(t{ 
"username": username, 
"message": message 


3 





render: function () { 
console.log(this.collection); 
s(this.el) .html(_.templatel 
this.template, 
this.collection 
)); 
} 


最 终 我 们 修改 的 app.js 是 这 样 的 : 


/* 
这 是 一 本 关于 JavaScript 和 Node.js 的 书 ， 
它 将 教 你 如 何 快速 创建 移动 和 Web 应 用 ， 
更 多 内 容 请 访问 : http://rapidprototypingwithjs.com 
* 
类 





zecuire([ 
'libs/text!header.html', 
'libs/text!home.html', 
'libs/text!footer.html'], 
funetEon, ( 
headerTp]l, 
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homeTp]l, 

footerTpl) { 
Parse.initializel( 

"your-parse-app-id", 

"your-parse-js-sdk-key"); 


Var ApplicationRouter = Backbone.Router.extend({ 


routes: { 


"": "home", 
"*actions": "home" 
} 
initialize: function () { 


this.headerView = new HeaderView!(); 
this.headerView.render (); 
this.footerView = new FooterView!(); 
this.footerView.render(); 

Le 

home: function () { 
this.homeView = new HomeView(); 
this.homeView.render(); 

} 


HeaderView = Backbone.View.extend (1{ 
el: "#header", 
templateFileName: "header.html", 
template: headerTp]l, 
initialize: function () { 
和 


render: function () { 


s(this.el) .html(_.template(this.template)); 


} 
下 


FooterView = Backbone.View.extend ({ 
el: "#footer", 
template: footerTpl, 
render: function () { 

this.s$sel.html(_.template(this.template)); 

} 

}); 

Message = Parse.Object.extendl(t{ 
className: "MessageBoard" 

es 

MessageBoard = Parse.Collection.extend({ 
model: Message 

下 


HomeView = Backbone.View.extend({ 
el: "#content", 
template: homeTpl, 
events: { 
"click #send": "saveMessage" 
}, 
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initialize: function () { 
this.collection = new MessageBoard(); 
this.collection.bind("all", this.render, this); 
this.collection.fetch(); 
this.collection.on("add", function (message) { 
message.save(null, { 
success: function (message) { 
console.log('saved ' + message); 
js 
error: function (message) { 
console.log('error'); 
} 
有 
console.log('saved' + message); 
} 
js 
saveMessage: function () { 
Var newMessageForm = $("#new-message"); 
Var username = 
newMessageForm 
.find(' [name="username"]') 
.attr('value'); 
Var message = newMessageForm 
.find(' [name="message"]') 
.attr('value'); 
this.collection.add(t{ 
"username": username, 
"message": message 
})3 
ja 
render: function () { 
console.log(this.collection) 
s(this.el) .html(_.templatel 
this.template, 
this.collection 





app = new ApplicationRouter(); 
Backbone.history.start(); 
js 


完整 的 Backbone.js 和 Parse.com Chat 应 用 源码 在 rpjs/sdk” 可 以 获取 。 


5.2 ”部署 Chat 到 PaaS 


一 旦 确认 了 你 的 前 端 应 用 在 本 地 工作 正常 了 (使 用 或 不 使 用 本 地 HTTP 服务 器 ， 如 MAMP 
或 XAMPP )， 请 将 它 部 署 到 Windows Azure 或 者 Heroku。 详 细 的 部 署 说 明 可 以 参考 第 3 章 。 








GD https://github.com/azat-co/rpjs/tree/master/sdk 
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5.3 ”增强 Chat 应 用 
在 上 面 的 两 个 示例 中 ，Chat 的 功能 非常 基础 。 你 可 以 通过 增加 更 多 特性 来 增强 这 个 应 用 。 
中 级 开发 者 可 以 添加 的 一 些 功能 : 


口 在 展示 之 前 通过 updateat 属性 对 消息 列表 排序 ; 

口 添加 一 个 “Refresh” 按 钮 来 刷新 消息 列表 ; 

口 在 第 一 条 消息 之 后 在 运行 时 内 存 或 者 一 个 会 话 里 存储 用 户 名 ; 
口 给 每 一 个 消息 添加 一 个 “ 顶 ” 的 功能 ， 并 存储 ; 

口 给 每 一 个 消息 添加 一 个 “ 踩 ” 的 功能 ， 并 存储 。 


高 级 开发 者 可 以 添加 的 一 些 功能 : 


口 添加 一 个 用 户 集 合 ; 

口 防止 同一 个 用 户 多 次 “ 顶 ”; 

口 使 用 Parse.com 的 功能 添加 用 户 注 册 和 登录 动作 ; 

口 在 每 一 个 当前 用 户 创建 的 消息 旁 添 加 一 个 删除 按钮 “Delete Message”; 
口 在 每 一 个 当前 用 户 创建 的 消息 旁 添加 一 个 编辑 按钮 “Edit Message”。 
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提要 : 展示 Node.js 的 Hello World 程序 、Nodejs 的 一 些 重 要 的 核心 模块 、NPM 工作 流 ， 以 
及 在 Herohu 和 Windows Azure 上 部 署 Nodes.js 应 用 的 详细 命令 ; 学 习 MongoDB 及 其 shell 运行 
时 和 数据 库 Chat 应 用 ; 研究 一 个 测试 驱动 开发 的 例子 。 


6.1.1 创建 Node.js 的 Hello World 程 序 
首先 需要 检查 一 下 你 的 电脑 里 是 否 装 了 Nodejs， 在 终端 里 输入 下 面 的 命令 并 运行 : 

















$ node -v 
写作 本 书 时 ， 最 新 的 版 本 是 0.8.1。 如 果 你 没有 安装 Nodejs， 或 者 你 的 版 本 比较 落后 ， 可 以 
在 nodejs.org/#download2 下 载 最 新 的 版 本 。 


按照 惯例 ， 你 可 以 从 rpjs/hello 复制 示例 代码 或 者 自己 动手 写 。 如 果 你 想 用 后 一 种 方式 ， 首 
先 创 建 一 个 名 为 hello 的 文件 夹 ， 然 后 创建 名 为 server.js 的 文件 ， 接 下 来 一 行 一 行 地 输入 下 面 的 
代码 。 


这 行 代码 会 为 服务 器 载 和 人 核心 的 http 模块 ( 稍 后 会 有 关于 此 模块 的 详细 介绍 ): 

















Var http = require('http'); 


我 们 需要 定义 我 们 的 Node.js 服务 需 使 用 的 端口 。 首 先 尝 试 从 环境 变量 中 获取 ， 如 果 环 境 变 





GD http://en.wikipedia.org/wiki/Martin Fowler 
© http://nodejs.org/#download/ 
G@) https://github.com/azat-co/rpjs/tree/master/hello 
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量 中 没有 ， 则 设置 一 个 默认 的 值 ， 代 码 如 下 : 





var port = process.env.PORT || 1337; 
创建 一 个 服务 器 程序 ， 它 的 回调 函数 包含 了 处 理 响 应 的 代码 : 
Var server = http.createServer (function (req, res) { 
设置 正确 的 首部 和 响应 状态 码 : 

res.writeHead(200, {'Content-Type': 'text/plain'}); 
输出 “Hello World” 和 换行 符号 : 


res.end('Hello World\n'); 
})3 


设置 服务 监听 的 端口 ， 并 且 在 终端 输出 服务 右 地 址 及 端口 号 : 





server.listen(port, function() { 
console.log('Server is running at %s:%s ‘' 
Server.address() .address, server.address() .port); 


})3 
在 终端 里 serverjs 所 在 的 文件 来， 运行 下 面 的 命令 : 
$ node server.js 


用 浏览 器 打开 localhost:1337? 或 127.0.0.1:13372 , 或 者 你 在 终端 里 看 到 的 由 console.1log() 
函数 输出 的 其 他 地 址 , 你 将 在 浏览 器 里 看 到 “Hello World”。 可 以 通过 按 下 Ctrl + C 快捷 键 关闭 服 
务 器 。 





注意 
主 文件 的 名 字 也 有 可 能 不 是 serverjs， 比 如 有 的 是 index.js， 有 的 是 app.js。 如 
果 你 需要 运行 app.js， 使 用 $ node app.js 即 可 。 GE 


6.1.2 ”Node.js 核 心 模块 


与 别 的 编程 语言 不 同 的 是 ，Node.js 并 没有 自 带 一 个 庞大 的 标准 库 。Nodejjs 的 核心 模块 是 非 
常 小 的 ， 其 他 的 模块 可 以 通过 NPM ( Nodejs Package Manager ) 获取 。 主 要 的 核心 类 、 模 块 、 方 
法 和 事件 包含 : 


口 http? 





























人 http://localhost:1337 
© http://127.0.0.1:1337 
@® http://nodejs.org/api/http.html#http_http 
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Dutil” 

口 querystring” 
Dul 

Dfs" 





http® 
这 个 模块 主要 负责 Node.js HTTP 服务 器 。 下 面 是 它 的 主要 方法 。 


口 nttp.createServer(): 返回 一 个 新 的 Web 服务 器 对 象 。 

口 http.1isten() : II 

口 http.createclient(): node 应 用 可 以 作为 客户 端 并 且 向 别 的 服务 端 发 送 请 求 。 
口 http.ServerRequest () : 收 到 的 请 求 会 传递 给 如 下 请 求 处 理 函 数 。 


m data: 收 到 信息 主体 时 触发 的 事件 。 

m end: 每 个 请 求 结束 时 只 触发 一 次 的 事件 。 

ms request .method() : 字符 串 作 为 请 求 的 方法 名 。 
@ zecuest .url (): 请 求 的 URL 字符 串 。 


口 http.ServerResponse(): HTTP 服务 器 内 部 创建 的 对 象 ， 而 不 是 由 用 户 创 建 的 ， 作 为 
请 求 处 理 函 数 的 输出 。 


We oa : 向 请 求 发 出 一 个 响应 首部 。 
response.write(): 给 请 求 发 送 响应 头 。 
response.end(): 发 出 并 结束 响应 体 。 























utile 
提供 用 来 调试 的 工具 函数 ， 例 如 下 面 这 个 函数 。 
DO util.inspect( 返回 一 个 对 象 的 字符 串 表 示 ， 这 在 调试 的 时 候 很 有 用 。 








querystring” 


提供 对 查询 字符 串 进行 处 理 的 工具 函数 ， 它 包含 下 面 这 些 方法 。 

















GD http://nodejs.org/api/util.html 

© http://nodejs.org/api/querystring.html 
© http://nodejs.org/api/url.html 

(@ http://nodejs.org/api/fs.html 

©) http://nodejs.org/api/http.html#http_http 
© http://nodejs.org/api/util.html 

© http://nodejs.org/api/querystring.html 
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口 querystring.stringify(): 把 一 个 对 象 序列 化 成 查询 字符 串 。 
D querystring.parse(): 把 一 个 查询 字符 串 反 序列 化 成 对 象 。 


url®? 
包含 用 于 URL 处 理 和 解析 的 工具 函数 ， 例 如 下 面 这 个 函数 。 
口 barse() : 处 理 一 个 URL 字符 串 ， 并 返回 一 个 对 象 。 


@ 





fs 
用 于 处 理 文件 系统 操作 ， 比 如 读 写 文件 。 这 个 库 里 既 有 同步 的 函数 也 有 异步 的 函数 。 下 面 是 

它 包含 的 一 些 方法 。 

口 fs .readFile(): 异步 读 取 一 个 文件 。 

口 fs .writerFile(): 将 数据 异步 写 入 一 个 文件 。 

核心 模块 不 用 安装 或 者 下 载 。 如 果 想 在 你 的 程序 中 使 用 它们 ， 只 需要 用 下 面 的 代码 : 

var http = require('http'); 

非 核 心 的 模块 可 以 用 下 列 方法 找到 。 


口 npmjs.org”: Node Package Manager 注册 库 。 
口 GitHub hosted list*: Joyent 维护 的 Node.js 模块 列表 。 
口 nodetoolbox.com”: 基于 统计 数据 的 注册 库 。 

口 Nipster": NPM 搜索 工具 。 

口 Node Tracking”: 基于 GitHub 统计 数据 的 注册 库 。 


如 果 你 想 了 解 如 何 写 一 个 属于 自己 的 模块 ， 可 以 看 看 这 篇 文章 : Your first Node.js module”。 

















6.1.3 NPM 
NPM 可 以 为 你 管理 模块 依赖 和 安装 模块 。 Nodejs 的 安装 程序 默认 带 了 NPM， 它 的 网 址 是 EE 


npmjs.org”。 








GD http://nodejs.org/api/url.html 

© http://nodejs.org/api/fs.html 

@® https:/npmjs.org 

(@ https://github.com/joyent/node/wiki/Modules 

© http://nodetoolbox.com/ 

©© http://eirikb.github.com/nipster/ 

© http:/nodejsmodules.org 
http://cnnr.me/blog/2012/05/27/your-first-node-dot-js-module/ 
© https:/npmjs.org 
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package.json 包含 了 我 们 的 Node.js 程序 的 元 信息 ， 比 如 版 本 号 、 作 者 ,最 重要 的 是 我 们 的 应 


用 程序 的 依赖 。 所 有 这 些 信息 以 JSON 对 象 的 格式 保存 ，NPM 会 读 取 它 。 
如 果 你 想 安装 在 package.json 里 定义 的 包 和 依赖 ， 输 入 : 


$ npm install 


一 般 package.json 文件 如 下 所 示 : 


{ 
"name": "Blerg", 
"description": "Blerg blerg blerg.", 
ersion". "0.0.1"., 
vathnor™s 4 
"name" : "John Doe", 
"email" : "john.doe@gmail .com" 


} 


"repository": { 


veEype 和 
"url": "http://github.com/johndoe/blerg.git" 
7 
"engines": [ 
"node >= 0.6.2" 
]， 
"license" : "MIT", 
"dependencies": { 
"express": ">= 2.5.6" 
"mustache": "0.4.0" 
"commander": "0.5.2" 
} 
"人 
Leng & "ELL 


} 


把 一 个 包 更 新 到 最 新 版 本 ， 或 者 由 package.json 中 的 版 本 说 明 所 定义 的 最 新 版 本 
$ npm update name-of-the-package 
或 者 ， 单独 安 闭 一 个 模块 : 


$ npm install name-of-the-package 


本 书 示例 中 用 到 的 唯一 不 属于 Node,js 核心 模块 的 模块 是 mongoqb， 稍 后 的 章节 将 4 
安装 它 














Heroku 在 服务 器 上 运行 NPM 需要 package.json。 
更 多 关于 NPM 的 信息 ， 请 参阅 这 篇 文章 : Tour ofNPM 。 





GD http://tobyho.com/2012/02/09/tour-of-npm/ 
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6.1.4 ” 部署 Hello World 到 PaaS 


Heroku 和 Windows Azure 的 部 署 都 需要 有 一 个 Git 仓库 。 在 你 的 项 目的 根 目录 创建 一 个 Git 
仓库 ， 需 输入 并 运行 下 面 的 命令 : 





总 Lt 工 生 七 
Git 将 会 创建 一 个 隐藏 的 .git 文件 来。 现在 我 们 来 添加 文件 ， 然 后 做 第 一 次 提交 : 
8 git add 


$ git commit -am "first commit" 


技巧 

A 如 果 想 在 Mac OS X Finder 应 用 里 查看 隐藏 文件 ， 可 以 在 终端 窗口 执行 命令 : 
defaults write com.apple.finder AppleShowAllFiles -bool true。 
恢复 隐藏 文件 的 命令 是 : defaults write com.apple.finder AppleShow 
AllFiles -bool falseo。 


6.1.5 ”部 署 到 Windows Azure 














为 了 把 Hello World 程序 部 署 到 Windows Azure， 必 须 添加 一 个 Git 远程 地 址 。 你 可 以 从 
Windows Azure Portal 上 的 Web Site 下 复制 地 址 ， 然 后 使 用 下 面 的 命令 : 


$ git remote add azure yourURL 
使 用 下 面 的 命令 来 推送 你 的 代码 : 
$ git push azure master 


如 果 一 切 正常 ， 你 可 以 在 命令 行 里 看 到 成 功 的 日 志 ， 用 浏览 器 查看 你 的 Windows Azure Web 
Site URL 能 看 到 “Hello World”。 


推送 本 地 的 一 些 修改 ， 只 需要 执行 : 


$ git adqd . 
$ git commit -m "changing to hello azure" 
$ git push azure master 





更 详细 的 指导 可 以 查看 这 篇 教程 : Build and deploy a Node.js web site to Windows Azure"。 


6.1.6 ”部 署 到 Heroku 
为 了 部 署 到 Heroku ,我 们 还 需要 再 创建 两 个 文件 :Procfile 和 package.json。 你 可 以 从 rpjs/hello” 





GD http://www.windowsazure.com/en-us/develop/nodejs/tutorials/create-a-website-(mac)/ 
© https://github.com/azat-co/rpjs/tree/master/hello 
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获得 源码 ， 或 者 自己 写 一 份 。 
Hello World 程序 的 目录 结构 如 下 所 示 : 


/hello 
-package.json 
-Procfile 
-Server.js 


Procfile 用 来 描述 在 Heroku 平台 上 运行 你 的 项 目 里 的 哪 一 个 命令 。 
该 运行 什么 。 在 这 个 例子 里 Procfile 只 有 一 行 : 


hl 





有 实 上， 它 告诉 Heroku 


web: node server.js 


这 个 例子 里 ， 我 们 使 用 了 一 个 很 简单 的 package.json: 





"name": "node-example", 
VyerSsLonTs O01; 
"dependencies": { 
} 
"engines": { 
"node": ">=0.6.x" 
} 
} 


所 有 的 文件 都 在 项 目 文件 夹 里 之 后 ， 我 们 使 用 Git 来 部 署 应 用 程序 。 命 令 和 Windows Azure 
的 命令 很 类 似 ， 只 是 需要 添加 Git 远程 库 地 址 ， 还 需要 使 用 下 面 的 命令 创建 Cedar stack: 


























$ heroku create 


执行 完毕 后 ,我 们 可 以 提交 并 且 推 送 到 远程 库 了 





git push heroku master 
git add . 

git commit -am "changes" 
git push heroku master 


如 果 一 切 正常 ， 可 以 在 终端 里 可 以 看 到 成 功 的 日 志 ， 并 且 通 过 浏览 器 访问 你 的 Heroku app 
网 址 ， 可 以 看 到 “Hello World”。 


A 




















6.2 ”Chat: 运行 时 内 存 版 本 


为 了 遵循 KISS? (Keep It Simple, Stupid ) 编程 原则 ， 第 一 个 版 本 的 Chat 服务 端 程序 仅 把 信 
息 保 存在 运行 时 内 存 中 。 这 意味 着 ， 每 一 次 我 们 启动 或 者 重 置 服 务 器 的 时 候 ， 数 据 都 会 清空 








QD http://en.wikipedia.org/wiki/KISS_principle 
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我 们 从 一 个 简单 的 测试 用 例 开始 , 来 说 明 测 试 驱 动 的 开发 方式 。 全 部 的 代码 可 以 在 rpjs/test™ 
文件 夹 下 找到 。 


6.3 ”Chat 的 测试 用 例 

我 们 有 如 下 两 个 方法 : 

(1) getMessages () 方 法 用 来 处 理 GET /message 请 求 , 它 以 JSON 数组 对 象 的 格式 返回 所 
有 的 消息 ; 

(2) adqMessage () 方 法 用 来 处 理 POST /messages 请 求 ， 它 会 添加 一 个 包含 name 和 
message 属性 的 信息 。 

先 创建 一 个 空 的 mb-server.js 文件 。 接 下 来 让 我 们 创建 一 个 包含 下 面 内 容 的 测试 文件 testjs: 


Var http = require('http'); 
Var assert = require('assert'); 
Var querystring = require('querystring’); 





Var util = require('util'); 

Var messageBoard = require('./mb-server'); 

assert.deepEqual('[{"name":"John","message":"hi"}]', 
messageBoard.getMessages ()); 

assert.deepEqual ('{"'name":"Jake", "message":"gogo"}', 





messageBoard.addMessage ("name=Jake&message=gogo")); 
assert.deepEqual('[{"name":"John","message":"hi"},{"name":"Jake",'"message":"gogo"}]', 
messageBoard.getMessages ("name=Jake&message=go0go")); 


请 一 定 牢记 ， 这 里 比较 的 仅仅 是 简单 的 字符 串 ， 而 不 是 JavaScript 对 象 ! 所 以 ， 空格、 引号 
和 大 小 写 是 有 区 别 的 。 你 也 可 以 尝试 像 这 样 把 字符 串 解 析 成 JSON 对 象 , 进行 更 “智能 ”的 比较 : 
JSON.parse (str); 
为 了 验证 我 们 的 假设 ,我 们 使 用 Node.js 核心 模块 assert*”。 它 提供 了 一 些 非常 有 用 的 方法 ， 
比如 equal () 、deepEqual () 等 。 
以 下 高 级 库 可 以 提供 TDD 或 者 BDD 方式 的 测试 ， 比 如 : 
口 Should? 
口 Expect 


要 应 用 更 多 测试 驱动 开发 和 自动 化 测试 ， 可 以 使 用 下 面 的 库 和 模块 : 



































GD https://github.com/azat-co/rpjs/tree/master/test 
© http://nodejs.org/api/assert.html 

@® https://github.com/visionmedia/should.js/ 

(@ https://github.com/LearnBoost/expect.js/ 
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口 Mocha” 

口 NodeUnit2 
口 Jasmine” 
口 Vows’ 

口 Chai® 


现在 可 以 把 Hello World 的 代码 复制 到 mb-server.js 里 或 者 保持 它 的 内 容 是 空 的 。 若 在 终端 里 
执行 test.js: 




















$ node test.js 
会 有 错误 出 现 ， 大 概 会 像 这 样 : 
TypeError: Object #<Object> has no method 'getMessages' 


这 是 正常 的 ， 因 为 我 们 还 没有 写 getMessages () 方 法 。 接 下 来 ， 我 们 通过 添加 两 个 方法 来 
让 程序 达到 我 们 的 期 望 : 一 个 方法 获取 消息 列表 ， 另 一 个 方法 把 消息 添加 到 集合 里 。 


mb-serverjs 的 全 局 exports 对 象 : 














exports.getMessages = function() { 
return JSON.stringify (messages); 
}; 
exports.addMessage = function (data)f{ 
messages.push (querystring.parse (data)); 
return JSON.stringify(querystring.parse (data)); 
地 


到 目前 为 止 ， 还 没有 太 神 奇 的 代码 吧 ? 我 们 使 用 一 个 数组 来 保存 消息 列表 : 




















var messages=[]; 

// 这 个 数组 将 保存 消息 

messages.pushl(t{ 
"name":"John", 
"message": "hi" 

3} 

// 用 于 测试 输出 列表 的 简单 信息 


提示 
一 般 情 况 下 , 像 模拟 数据 这 样 的 代码 应 该 放 在 test/spec 文件 里 ,而 不 是 直接 放 
到 主 程序 里 。 





QD http://visionmedia.github.com/mocha/ 
© https://github.com/caolan/nodeunit 
© http://pivotal.github.com/jasmine/ 

(@ http://vowsjs.org/ 

© http://chaijs.com/ 
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我 们 的 服务 器 代码 看 上 去 有 一 点 意思 了 。 为 了 获取 消息 列表 , 根据 REST 方 法 论 , 我 们 需要 
发 起 一 个 GET 请 求 。 创建 /添加 一 条 消息 , 应 该 是 一 个 PosT 请 求 。 所 以 在 我 们 的 createServer 
对 象 里 ， 我 们 应 该 添加 reaq.method() 和 rea.url() 检 查 HTTP 请 求 的 类 型 和 URL 路 径 。 


加 载 http 模块 : 


Var http = require('http'); 


使 用 util 和 aquerystring 模 块 里 的 一 些 辅助 函数 ( 用 来 序列 化 和 反 序列 化 对 象 及 查询 字符 串 ): 


Var util = require('util'); 
Var querystring = require('gquerystring'); 


创建 一 个 服务 器 并 且 暴 露 到 模块 外 ， 这 样 就 可 以 供 别 的 代码 使 用 〈 即 testjs ): 
exports.server=http.createServer (function (req, res) { 
在 请 求 的 回调 函数 里 ,我 们 需要 检查 请 求 的 方法 是 否 是 POST,URL 是 否 是 messages/create.json: 


if (req.method == "POST" && 
req.url == "/messages/create.json") { 


如 果 上 面 的 条 件 是 true， 我 们 添加 一 个 消息 到 数组 里 。 然 而 ， 数 据 在 添加 前 必须 被 转换 为 
字符 串 类 型 (编码 是 UTF-8 )， 因 为 它 是 一 个 Buffer 类 型 : 












































Var message = ''; 
red.on('dqata'，functionl(dqata，message){ 
console.log(data.toString('utf-8')); 
message = exports.addMessage (data.toString('utf-8')); 


输出 日 志 帮 助 我 们 在 终端 里 查看 服务 器 的 状态 : 
) ) 


console.log(util.inspect (message, true, null)); 
console.log(util.inspect (messages, true, null)); 


请 求 的 响应 应 该 是 文本 格式 ， 同 时 状态 码 是 200 (很 好 ): 


res.writeHead(200, { 
'Content-Type': 'text/plain' 
】 


输出 新 创建 的 消息 : 


res.end(message); 


} 


如 果 请 求 的 方法 是 GET 并 且 URL 是 /messages/1ist.json， 那 就 输出 消息 列表 : 


























IE (req.method == "GET" && 
req.url == "/messages/list.json") { 
获取 消息 列表 : 
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Var body = exports.getMessages () ; 
响应 体 将 会 包含 我 们 的 输出 : 


res.writeHead(200, { 
'Content-Length': body.length, 
'Content-Type': 'text/plain' 

于 

res.end(body); 


} 


else { 
设置 正确 的 首部 和 状态 码 : 


res.writeHead(200, { 
'Content-Type': 'text/plain' 
人 


如 果 不 符 合 上 面 两 种 情况 ， 则 输出 一 个 带 换行 符 的 字符 串 : 


res.end('Hello World\n'); 








过 
console.log(regq.method); 


}) .listen(1337, "127.0.0.1"); 
在 终端 里 设置 我 们 的 服务 器 端口 和 IP 地 址 : 
console.1og('Server running at http://127.0.0.1:1337/'); 
通过 exports 暴露 出 方法 , 这样 就 可 以 在 单元 测试 的 testjs ( 导出 关键 
法 会 返回 字符 串 /文本 格式 的 消息 数组 : 

exports .getMessages = function() { 


return JSON.stringify (messages); 
上 


adqMessage () 使 用 querystring 的 解析 和 反 序 列 化 方法 把 一 个 字符 串 转 换 为 一 个 
JavaScript 对 象 : 





) 里 使 用 , 这 个 方 


尼 





























exports.addMessage = function (data)t{ 
messages.push (querystring.parse (data)); 


同时 返回 一 个 字符 品格 式 的 消息 : 


return JSON.stringify(querystring.parse (data)); 
过 


下 面 是 mb-server.js 的 完整 代码 ， 在 rpjs/test" 里 也 可 以 找到 它 : 





Var http = require('http'); 
// 加 载 http 模块 


var util = require('util'); 





QD https://github.com/azat-co/rpjs/tree/master/test 
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// 有 用 的 函数 

Var querystring = require('querystring'); 
// 加 载 querystring 模块 ， 

// 需 要 用 它 来 序列 化 和 反 序 列 化 对 象 及 请 求 字 符 串 


Var messages = []; 
// 这 个 数组 将 保存 消息 
messages.push(t{ 
"name": "John", 
"message": "hi" 
车 
// 用 于 测试 输出 列表 的 简单 信息 


exports.server = http.createServer (function(req, res) { 


/ /创建 服务 器 
if (req.method == "POST" && 
req.url == "/messages/create.json") { 


/ /如 果 请 求 方法 是 POST,， 并且 URL 是 messages/， 
// 添 加 这 个 消息 到 数组 里 
Var message = ''; 
req.on('data', function(data, message) { 
console.log(data.toString('utf-8')); 
message = exports.addMessage (data.toString('utf-8')); 
//data 是 Buffer 类 型 并 且 必 须 使 用 UTF-8 编码 转 为 字符 串 
// 添 加 到 消息 数组 
}) 
console.log(util.inspect (message, true, null)); 
console.log(util.inspect (messages, true, null)); 
/ /调试 信息 输出 到 终 闸 
res.writeHead(200, { 
'Content-Type': 'text/plain' 
JJ 
/ /设置 正确 的 响应 头 及 状态 码 
res.end(message); 
// 输 出 信息 ， 应 该 添加 对 象 id 
} 
IE (regq.method == "GET" && 
req.url == "/messages/list.json") { 
/ /如 果 请 求 方法 是 GET， 并 且 URL 是 /messages 
// 输 出 消息 列表 
Var body = exports .getMessages (); 
//body 变量 保存 输出 
res.writeHead(200, { 
'Content-Length': body.length, 








'Content-Type': 'text/plain' 
})3 
res.end(body); 
} 
else { 
res.writeHead(200, { 
'Content-Type': 'text/plain' 


js 
/ /设置 正确 的 响应 头 及 状态 码 
res.end('Hello World\n'); 
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i 
console.log(regq.method); 
// 输 出 字符 串 同时 附加 换行 符 
1 TLiSten(1337; “L270 0 二) 
/ /设置 服务 器 的 竟 口 和 IP 地址 
console.log('Server running at http://127.0.0.1:1337/'); 


exports.getMessages = function() { 
return JSON.stringify (messages); 
// 以 字符 串 文 本 的 形式 输出 消息 
}3 
exports.addMessage = function(data) { 

messages.push (querystring.parse (data)); 

// 用 解析 和 反 序 列 化 器 把 一 个 请 求 事 转 成 JavaScript 对 象 

return JSON.stringify(querystring.parse (data)); 

// 以 JSON 字符 事 的 形式 输出 新 消息 
}3 
用 浏览 器 打开 localhost:1337/messages/list.json" 检 查 一 下 ,你 会 看 到 一 条 测试 用 的 消息 。 男 外 ， 
也 可 以 在 终端 里 通过 curl 命令 测试 : 

$ curl http://127.0.0.1:1337/messages/list.json 

使 用 命令 行 接口 模拟 一 次 PosT 请 求 : 

curl -d "name=BOB&message=test" http://127.0.0.1:1337/messages/create.json 

你 将 会 在 服务 器 终端 窗口 看 到 输出 ; 然后 刷新 localhost:1337/messages/list.json”, 会 看 到 一 条 
“test” 新 消息 。 毫 无 疑问 ， 三 个 测试 用 例 都 应 该 通过 了 。 

随 着 方法 、 要 解析 的 路 由 和 条 件 越 来 越 多 , 程序 也 会 变 得 越 来 越 大 。 这 时 使 用 框架 的 好 处 就 
显现 出 来 了 。 它 们 提供 处 理 请 求 的 辅助 函数 和 其 他 有 用 的 东西 ， 比 如 session 、 静 态 文件 支持 等 。 
在 这 个 例子 里 ， 我 们 特意 没有 使 用 诸如 Express ( http://expressjs.com/ )、Restify ( http://mcavage. 
github.com/node-restify/ ) 这 样 的 框架 。 下 面 是 一 些 值得 关注 的 Nodejs 框架 。 


口 Derby”: MVC 框架 ， 用 来 构建 在 Node.js 和 浏览 器 里 运行 的 实时 、 协 作 应 用 。 
口 Expressjs”: 最 健壮 、 测 试 最 完善 、 使 用 最 多 的 Node.js 框架 。 

口 Restify”: 构建 REST API 服务 器 的 轻 量 级 框架 。 

口 Sailsjs": MVC Node.js 框架 。 

口 hap 记 : 在 Express.js 基础 上 构建 的 Nodejs 框架 。 























GD http:Wlocalhost:1337/messages/list.json 
© http:/localhost:1337/messages/list.json 
@® http://derbyjs.com 

(@ http:/expressjs.com 

© http://mcavage.github.com/node-restify/ 
© http://sailsjs.com 

© http://spumko.github.io 
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口 Connect”: node 中 间 件 框架 , 内 置 超过 18 个 中 间 件 , 并 且 拥 有 大 量 可 选 的 第 三 方 中 间 件 。 
口 GeddyJS”: 一 个 简单 的 结构 化 的 Node MVC Web 框架 。 

口 CompoundJS”( ex-RailswayJS ): 在 ExpressJS 基础 上 构建 的 Node.js MVC 框架 。 

口 Towerjs": 为 Nodejs 和 浏览 器 开发 的 全 栈 Web 框架 。 

口 Meteor”: 只 需 用 很 少 的 时 间 就 可 以 构建 出 高 质量 Web 应 用 的 开源 平台 。 


我 们 的 程序 可 以 改进 的 地 方 有 : 


口 改进 已 有 的 测试 用 例 ， 对 比 对 象 而 不 是 字符 串 ; 

口 把 测试 数据 从 mb-server.js 里 移 到 test.js 里 ; 

口 给 前 端 代码 添加 测试 用 例 ， 比 如 投票 、 用 户 登 录 ; 

口 添加 方法 ， 完 善 前 端 代码 ， 比 如 投票 、 用 户 登 录 ; 

口 为 每 一 个 消息 生成 唯一 的 ID， 用 散 列 而 不 是 数组 存储 消息 ; 
口 安装 Mocha， 并 且 使 用 它 重 构 test.js。 


到 目前 我 们 还 是 把 消息 都 存放 在 了 程序 内 存 里 ， 所 以 每 一 次 程序 重启 ,消息 就 丢 了 。 为 了 解 
决 这 个 问题 ， 我 们 需要 有 一 个 永久 存储 ， 其 中 一 种 方式 就 是 使 用 数据 库 ， 比 如 MongoDB。 




































































6.4 MongoDB 


6.4.1 MongoDB Shell 


如 果 你 的 环境 还 没有 准备 好 ， 请 先 到 mongodb.org/downloads“ 下 载 安 装 最 新 版 的 MongoDB。 
更 多 的 内 容 可 以 参考 2.1.6 节 。 


现在 让 我 们 从 你 解压 的 文件 夹 的 位 置 开始 ， 启 动 mongod 服务 : 
$ ./bin/mongod 
可 以 在 终端 里 看 到 一 些 信息 ， 也 可 以 通过 访问 localhost:280172 看 到 信息 。 


同样 ， 在 刚才 解压 的 文件 夹 中 ， 男 开 一 个 新 窗口 (非常 重要 ! ), 使 用 MongoDB 的 命令 行 


或 mongo， 运 行 命令 : 























GD http://www.senchalabs.org/connect/ 
© http://geddyjs.corg 

@ http://compoundjs.com 

(@ http://towerjs.org 

© http://meteor.com 

© http://www.mongodb.org/downloads 
©@ http://localhost:28017 


图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


132 第 6 章 Node.js 和 MongoDB 





s ./bin/mongo 


你 会 看 到 像 下 面 一 样 的 信息 ， 这 和 你 安装 的 MongoDB 命令 行 的 版 本 有 关 : 





MongoDB shell version: 2.0.6 
connecting to: test 


测试 一 下 数据 库 , 它 的 接口 很 像 JavaScript, 我 们 使 用 命令 save 和 fing 来 进行 保存 和 查找 : 


> db.test.save( { a: 1 } ) 
> db.test.find() 


更 多 详细 指导 ， 请 查看 2.1.6 节 的 内 容 。 
下 面 是 一 些 有 用 的 MongoDB shell 命令 


help 

show dbs 

use board 

show collections 
db.messages.remove(); 

var a = db.messages.findOone(); 
printjson(a); 

a.message = "hi"; 
db.messages.save(a); 
db.messages.find({}); 
db.messages.update({name: "John"},{S$set: {message: "bye"}}); 
db.messages.findl({name: "John"}); 
db.messages.remove({name: "John"}); 


VV VV VV VVV VVVYV 


完整 的 MongoDB 交互 式 shell 可 以 在 mongodb.org 中 找到 : Overview - The MongoDB 
Interactive Shell”, 


6.4.2 ”MongoDB 原 生 驱 动 


我 们 使 用 MongoDB 的 原生 Node.js 驱动 (https://github.com/christkv/node-mongodb-native ) 
来 访问 MongoDB。 完 整 的 文档 可 以 在 http://mongodb.github.com/mode-mongodb-native/apigenerated/ 
db.html 中 看 到 。 


首先 来 安装 MongoDB 的 原生 Node.js 驱动 ， 使 用 : 











$ npm install mongodb 
更 多 详情 请 浏览 : http://www.mongodb.org/display/DOCS/node.]S。 


不 要 忘记 把 这 个 依赖 添加 到 package.json 里 ”: 





QD http://www.mongodb.org/display/DOCS/Overview+-+Thet+ MongoDB+Interactive+Shell 
@) 这 里 可 以 简单 使 用 npm install -save mongodb 自动 把 依赖 添加 到 package.json。 一 一 译 者 注 
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"name": "node-example", 

"version™: ™0,0,.1", 

"dependencies": { 
"mongodb":"" 


}, 
"engines": { 
"node": ">=0.6.x" 
} 
} 


你 自己 开发 时 也 可 以 使 用 一 些 别 的 封闭 好 的 模块 ， 它 们 是 原生 驱动 的 扩展 。 


口 Mongoskin": node-mongodb-native 的 未 来 包装 层 

口 Mongoose” : 带 有 可 选 的 建 模 功能 的 异步 JavaScript 驱动 器 。 

口 Mongolia”: 轻 量 级 MongoDB ORM/ 驱 动 需 包装 需 。 

口 Monk”: 一 个 小 型 的 包装 层 ， 给 Nodejs 里 使 用 MongoDB 提供 了 简单 且 更 易 用 的 增强 。 


下 面 的 小 例子 测试 是 否 能 通过 Node.js 脚本 连 上 MongoDB 实例 。 
安装 完 这 个 库 后 ， 我 们 可 以 在 db.js 文件 里 引入 它 : 

















Var util = require('util'); 
Var mongodb = require ('mongodb'); 


这 是 一 种 创建 与 MongoDB 服务 器 连接 的 方式 ,pb 变量 保存 着 一 个 特定 的 端口 和 主机 地 址 的 
数据 库 连 接 引 用 : 


var Db = mongodb.Db; 

Var Connection = mongodb.Connection; 
Var Server = mongodb.Server; 

var host = "i27,U0.1"s 

var DOrt, = 270L7S 








Var db=new Db ('test', new Server(host,port, {})); 


打开 一 个 链接 : 





db.open(function(e,c)t 
// 这 里 对 数据 库 进 行 一 些 操作 
// console.log (util.inspect (db)); 
console.log(db._state); 
db.close(); 
让 





GD https://github.com/guileen/node-mongoskin 
© http://mongoosejs.com 

@® https://github.com/masylum/mongolia 

(@ https://github.com/LearnBoost/monk 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


第 6 章 Nodejs 和 MongoDB 
这 段 代 码 在 rpjs/db/db.js" 文 件 夹 中 可 以 看 到 。 如 果 你 运行 它 ， 会 在 终端 里 输出 “connected”。 
属性 ， 可 以 使 用 util 模块 里 的 一 个 方法 : 


如 果 你 对 它 有 怀疑 并 且 想 检查 一 下 这 个 对 象 的 
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console.log(util.inspect (db)); 





6.4.3 MongoDB on Heroku: MongoHQ 
在 本 地 成 功 输出 “connected” 之 后 ， 是 时 候 做 些小 改动 ， 然 后 作为 服务 部 署 到 平台 上 了 ， 妈 





Heroku。 
息 可 以 在 这 里 查看 : https://devcenter.heroku.com/articles/ 








我 们 推荐 使 用 MongoHQ 扩展 ”， 它 是 MongoHQ ”技术 的 一 部 分 。 它 提供 了 一 个 浏览 器 界面 


来 查找 和 修改 数据 及 集合 。 更 多 的 信 





mongohq。 
注意 
ER 管 选 择 免费 版 本 ,使 用 MongoHQ 的 时 候 还 是 需要 你 提供 信用 卡 信息 。 当然 ， 


它 是 不 会 向 你 收费 的 。 
为 了 连接 到 数据 库 服务 器 ， 需 要 使 用 一 个 数据 库 连 接 URL ( 也 叫 MongoHQ URL/URI), 它 











的 目的 是 把 连接 需要 的 所 有 信息 组 织 成 一 个 字符 串 。 
(MONGOHO_URL ) 的 格式 如 下 : 





数据 库 连接 字符 
mongodb://user:pass@server.mongohq.com/db_name 


可 以 从 Heroku 的 网 站 上 复制 MongoHQ URL 字符 串 ( 然后 硬 编码 )， 也 可 以 从 Nodejs 的 环 


process .env.MONGOHQ_URL 








或 : 
Var connectionUri = url.parse (process.env .MONGOHQO URL); 
提示 
可 以 通过 全 局 对 象 brocess 上 的 env 变量 来 访问 环境 变量 。 这 些 变量 一 般 用 
来 传递 数据 库 主机 名 、 端 口 、 密 码 、API 密 钥 、 端 口号 和 其 他 系统 信息 ， 这 些 
信息 不 应 该 直接 硬 编码 进 主 交 辑 。 
采 环 


为 了 让 我 们 的 代码 在 本 地 和 Heroku 上 同时 运行 ， 可 以 使 用 逻辑 操作 符 “ 或 ”( | | )， 如 
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境 变量 是 undefined， 那 么 使 用 本 地 主机 和 端口 ， 代 码 如 下 : 


var port = process.env.PORT || 1337; 
var dbConnUrl = process.env.MONGOHQ URL || 
mongodb://8@127..0,.0,.17327017’3 


下 面 是 更 新 的 能 境 的 db.js 文件 : 
Var url = require('url'); 
Var util = require('util'); 


Var mongodb = require ('mongodb'); 
var Db = mongodb.Db; 

Var Connection = mongodb.Connection; 
Var Server = mongodb.Server; 


var dbConnUrl = process.env.MONGOHQ URL || 
'mongodb://127.0.0.1:27017'; 
Var host = url.parse (dbConnUrl1) .hostname; 
Var port = new Number (url.parse (dbConnUrl) .port); 
Var db=new Db ('test', new Server(host,port, {})); 
db.open(function(e,c)t 
// console.log (util.inspect (db)); 
console.log(db._state); 
db.close(); 
)9)3 


过 添加 MONGOHQ_URL 对 dbjs 进行 改造 ， 现 在 我 们 来 初始 化 Git 仓库 、 创 建 Heroku 程序 、 


i MongoHQ 扩展 ， 然 后 使 用 Git 部 署 应 用 程序 。 
利用 和 之 前 例子 一 样 的 步 又 来 创建 一 个 Git 仓 库 : 


git init 
git add . 
git commit -am 'initial commit' 


创建 Heroku 程序 的 Cedar Stack: 








$ heroku create 


如 果 一 切 正常 ， 你 会 看 到 一 一 条 带 有 Heroku 程序 名 ( 和 URL ) 的 消息 和 一 条 








添加 了 远程 的 消 


息 。 本 地 Git 仓库 存在 远程 很 重要 ， 你 可 以 通过 下 面 的 命令 查看 已 经 添加 的 远程 列表 : 





git remote Show 
经 存在 的 Heroku 程序 上 安装 免费 的 MongoHQ ， 使 用 : 


$ heroku addons :add mongohq:sandbox 


如 果 你 知道 程序 的 名 字 , 也 可 以 登录 addons.heroku.com/mongohq", 为 该 Heroku 程序 选择 免 


费 的 MongoHQ。 
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如 果 你 的 db.js 和 修改 后 的 db.js 正常 工作 了 ， 让 我 们 来 添加 一 个 HTTP 服务 器 ， 在 浏览 器 里 
展示 “connected” 消 息 ， 而 不 是 在 终端 里 。 为 了 达到 这 个 效果 ,我 们 需要 在 数据 库 连 接 的 回调 里 
封装 一 下 server 对 象 实例 : 











db.open(function(e, c) { 
// console.log (util.inspect (db)); 
Var server = http.createServer (function(req, res) { 
/ /创建 服务 器 
res.writeHead(200, {'Content-Type': 'text/plain'}); 
/ /设置 正确 的 响应 头 及 状态 码 
res.end(db._state); 
// 输 出 字符 事 同 时 附加 换行 符 
J 
server.listen(port, function() { 
console.log('Server is running at %s:%s ', 
server.address() .address, 
server.address() .port); 
/ /设置 服务 器 的 菇 口 与 IP 地 址 
} 
db.close(); 
} 3 


最 终 可 以 用 tpjs/db 的 appjs 来 部 署 : " 


2* 
这 是 一 本 关于 JavaScript 和 Node.js 的 书 ， 
它 将 教 你 如 何 快速 创建 移动 和 Web 应 用 ， 
更 多 内 容 请 访问 : http://rapidprototypingwithjs.com 
i 
Var util = require('util'); 
Var url = require('url'); 
Var http = require('http'); 
var mongodb = require('mongodb'); 
var Db = mongodb.Db; 
Var Connection = mongodb.Connection; 
Var Server = mongodb.Server; 
var port = process.env.PORT || 1337; 
var dbConnUrl = process.env.MONGOHQ URL || 
"mongodBs/ /L270.0. L27017 "3 
Var dbHost = url.parse(dbConnUrl1) .hostname; 
Var dbPort = new Number (url .parse (dbConnUrl1) .port); 
console.log(dbHost + dbPort); 
Var db = new Dbl('test', new Server(dbHost, dbPort, {})); 
db.open(function(e, c) { 
// console.1log (util.inspect (db)); 
// 创建 服务 器 
Var server = http.createServer (function(req, res) { 


// 设 置 正确 的 响应 头 及 状态 码 
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res.writeHead(200, { 

'Content-Type': 'text/plain' 
})3 
// 输 出 字符 串 同 时 附加 换行 符 
res.end(db._state); 

让 

/ /设置 服务 器 的 暮 口 与 IP 地 址 

server.listen(port, function() { 
console.log( 

'Server is running at %s:%s ', 
server.address() .address, 
server.address() .port); 

})s 
db.close(); 
上 


部 署 完成 后 ， 打 开 Herorku 提供 的 URL， 你 可 以 看 到 消息 “connected”。 


下 面 是 介绍 如 何 用 Node.js 代 码 来 使 用 MongoDB 的 手册 :mongodb.github.com/node-mongodb- 
native/api-articles/nodekoarticlel .html”。 


另 一 种 方法 是 使 用 MongoHQ 模块 ， 可 以 从 github.com/MongoHQ/mongohq-nodejs” 获 取 。 


下 面 的 例子 演示 了 mongodb 库 的 另 一 种 用 法 ,输出 集合 和 文档 数量 。 完 整 的 源码 从 rpjs/db/ 
collections.js” 获取: 


var mongodb = require('mongodb'); 


Var url = require('url'); 
Var log = console.1og; 
var dbUri = process.env.MONGOHQ URL ||'mongodb://localhost:27017/test'; 


Var connectionUri = url.parse (dbUri); 
Var dbName = connectionUri.pathname.replace(/^\//, ''); 


mongodb.Db.connect (dbUri, function(error, client) { 
if (error) throw error; 





client.collectionNames (function(error, names) { 
if (error) throw error; 


// 输 出 所 有 集合 的 名 字 
log("Collections"); 


Var lastCollection = null; 

names .forEach (function(colData) { 
Var colName = colData.name.replace(dbName + ".", ''); 
log(colName); 
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lastCollection = colName; 
3 
if (!lastCollection) return; 
Var collection = new mongodb.Collection(client, lastCollection); 
log("\nDocuments in " + lastCollection); 
Var documents = collection.find({}, {limit: 5}); 


// 输 出 找到 的 所 有 文档 的 数量 
documents.count (function(error, count) { 
log(" "+ count + " documents(s) found"); 


// 输 出 前 五 个 文档 
documents.toArray (function(error, docs) { 
if (error) throw error; 


docs.forEach(function(doc) { 
log (doc); 
二 


// 关 闭 连接 
client.close(); 








通过 var log = console.1o09; 来 使 用 console.1og() 的 快捷 方式 , 并 且 通 过 if(!1Last- 
Collection) return; 将 return 用 作 一 个 控制 流 。 

















6.4.4 BSON 


BinaryJSON, 也 叫 BSON, 它 是 MongoDB 使 用 的 一 种 专 有 的 数据 类 型 。 在 格式 上 它 有 点 像 
JSON， 但 是 支持 更 多 复杂 的 数据 类 型 。 




















警告 

A 关于 BSON 需要 注意 的 地 方 : MongoDB 里 的 ObjectId 和 MongoDB 的 原生 
Nodejs 驱动 里 的 ObjectID 是 一 样 的 。 请 确保 你 使 用 的 是 正确 的 那个 ， 否 则 
将 会 出 错 。 更 多 相关 类 型 参见 : ObjectId in MongoDB vs Data Types in 
MongoDB Native Node.js Drier” 。 关 于 mongoqb .objectID() 的 Nodejs 代码 
例子 : collection.findone({_id: new ObjectID(idString)}, console. 
1og) // ok。 另 一 方面 ， 在 MongoDB 命令 行 里 ,我 们 使 用 : db.messages. 
findone({_id:ObjectIid(idstr)});。 
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6.5 Chat: MongoDB 版 本 





我 们 已 经 设置 好 了 令 Node.js 程序 同时 在 本 地 和 Heroku 运行 所 需要 的 东西 ,源码 可 以 在 这 里 
找到 : rpjsAmongo"。 程 序 的 结构 很 简单 : 


/mongo 
-web.js 
-Procfile 
-package.json 


下 面 是 webjs 的 代码 ， 首 先 我 们 引入 一 些 库 : 


Var http = require('http'); 

Var util = require('util'); 

Var querystring = require(‘querystring’); 
Var mongo = require('mongodb'); 


接 下 来 使 用 一 个 神奇 的 字符 串 来 连接 MongoDB: 


Var host = process.env.MONGOHQ URL || "mongodb://@127.0.0.1:27017/twitter-clone"; 
//MONGOHO_ URL=mongodb://user:pass@server.mongohg.com/db_name 








注意 
@ URILURL 格式 里 包含 的 数据 库 名 是 可 选 的 ， 我 们 的 集合 会 保存 在 那里 。 你 完 
全 可 以 按照 自己 的 意愿 修改 它 ， 比 如 改 为 rpjs 或 者 test。 


我 们 把 所 有 的 逻辑 以 回调 函数 的 形式 放 在 一 个 打开 的 连接 里 : 


mongo.Db.connect (host, function(error, client) { 
if (error) throw error; 
Var collection = new mongo.Collectionl( 
client, 
'messages'); 
Var app = http.createServer (function(request, response) { 





if (request.method === "GET" && 
request.url === "/messages/list.json") { 
collection. 
find(). 





toArray (function(error, results) { 
response.writeHead(200, { 
'Content-Type': 'text/plain' 
局 
console.dir(results); 
response.end(JSON.stringifyl(results)); 
})3 
过 
if (request.method === "POST" && 
request.url === "/messages/create.json") f{ 
request.on('data', function(data) { 
collection.insert( 
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querystring.parse(data.toSstring('utf-8')), 
{safe: true}, 
function(error, obj) { 
if (error) throw error; 
response.end(JSON.stringify(obj)); 
} 


}) 
}; 
}); 
var port = process.env.PORT || 5000; 
app.listen (port); 
} 


注意 

©@ 集合 /实体 名 后 面 的 那些 单词 不 是 必需 的 ， 即 不 用 /messages/list.json 和 
/messages/create.json, 我 们 可 以 只 使 用 /messages 来 处 理 所 有 的 HTTP 
方法 ， 如 GET、POST、PUT 以 及 DELETE。 如 果 你 这 样 修改 了 ， 记 得 同时 修改 
你 的 CURL 命令 和 前 端 代码 。 

通过 下 面 的 cURL 终端 命令 来 测试 : 


curl http://localhost:5000/messages/list.json 

















或 者 用 浏览 器 打开 http://locahost:5000/messages/list.json。 
它 会 返回 一 个 空 数 组 : [] ， 这 是 正常 的 。 接 下 来 PosT 产生 一 个 新 消息 : 
curl -d "username=BOB&message=test" http://localhost:5000/messages/create.json 


现在 肯定 可 以 看 到 一 个 响应 ， 其 中 包含 新 创建 元 素 的 objectID， 例 如 : [{"username": 
"BOB", "message":id":"51ledcad45862430000000001"}]。 你 的 objectID 可 能 和 这 个 不 一 样 。 


如 果 在 本 地 一 切 工作 正常 ， 请 尝试 把 它 部 署 到 Heroku。 


把 http://localhost/ 或 者 http://127.0.0.1 替换 为 你 的 Heroku 程序 的 URL， 就 可 
以 使 用 同样 的 cURL 命令 来 测试 在 Heroku 上 的 程序 ， 如 下 所 示 : 











$ curl http://your-app-name.herokuapp.com/messages/list.json 
$ curl -d "username=BOB&message=test" 
http://your-app-name.herokuapp.com/messages/create.json 








我 们 可 以 通过 Mongo shell 的 $ mongo 终端 命令 ,然后 使 用 twitter-clone 和 db.messages. 
find() ,再 一 次 检查 一 下 数据 库 。 男 外 ,我 们 也 可 以 使 用 MongoHub”、mongoui”、mongo-express"， 
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或 者 使 用 heroku.com 上 的 MongoHQ Web 界面 。 
如 果 你 想 使 用 别 的 域名 ， 而 不 是 http://your-app-name.herokuapp.com， 需 要 做 两 件 事情 : 


(1) 告诉 Heroku 你 的 域名 : 





$ heroku domains:add www.your-domain-name.com 


(2) 在 你 的 DNS 管理 工具 里 添加 一 条 CNAME DNS 记录 ， 并且 指向 http://your-app-name. 
herokuapp.com。 








更 多 关于 自 定义 域名 的 信息 可 以 在 这 里 找到 : devcenterheroku.comyarticles/custom-domains" 。 


提示 

A 为 了 更 高 产 和 更 高 效 地 开发 ,我们 需要 尽 可 能 的 自动 化 ， 即 使 用 测试 而 不 是 
CURL 命令 。 在 第 8 章 有 一 篇 文章 是 关于 如 何 使 用 Mocha 库 的 文章 ， 该 库 和 
superagent 或 者 request 库 一 起 ， 可 以 在 这 类 任务 上 节约 时 间 。 
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调试 一 段 代码 的 难度 是 写 出 这 段 代码 的 两 倍 。 因 此 ,如果 你 的 代码 尽 可 能 清楚 ， 
那么 就 不 用 费力 的 调试 它 。 E 
一 一 布 菜 轧 ，W. 克 尼 汉 ” | 











现在 ， 如果 我 们 前 端 和 后 端的 应 用 合并 起 来 并 且 工 作 正常 , 那 是 极 好 的 。 下 面 是 做 这 个 事情 
的 两 种 方式 。 








口 ee 端 不 同 域 (Heroku 应 用 ): 保证 在 使 用 CORS 或 者 JSONP 的 时 候 没有 跨 域 的 问 
。 稍 后 会 详细 介绍 这 个 方法 。 

口 确保 Nodejs 处 理 前 端 静 态 文件 和 资源 文件 ， 这 种 方法 在 正式 上 线 的 应 用 中 
是 不 推荐 的 。 


7.1 不 同 域 部 署 
这 是 目前 为 止 产品 环境 最 好 的 实践 .后 端 应 用 一 般 部 署 在 http:/app. 或 者 http:/api. 子 域名 上 。 
为 了 使 不 同 域 的 部 署 能 正常 工作 ， 需 要 把 受 同 一 域 限 制 的 AJAX 技术 换 成 JSONP: 


Var request = $.ajax({ 
urls url, 
dataType: "jsonp", 
Qatar Tv,wms} 
jsonpCallback: "fetchData", 
type: "GET" 
过 


还 有 一 种 更 好 的 方式 , 即 在 Node.js 服务 器 应 用 返回 前 添加 OoPTIONS 方法 和 特殊 的 响应 头 部 
信息 ， 也 叫 CORS: 
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response.writeHead(200, { 
'Access-Control-Allow-Origin': origin, 
'Content-Type': 'text/plain', 
'Content-Length': body.length 

二 


或 者 : 


res.writeHead(200, { 
'Access-Control-Allow-Origin': 'your-domain-name', 


四 到 


OPTIONS 方法 所 需 的 东西 在 HTTP 访问 控制 (CORS ) "里 有 定义 。oPTIONS 请 求 可 以 通过 
下 面 的 代码 进行 处 理 : 


if (request.method == "OPTIONS") { 
response.writeHead("204", "No Content", { 
"Access-Control-Allow-Origin": origin, 
"Access-Control-Allow-Methods": 

GET POST, PUT; DELETE,; OPTIONS". 
"Access-Control-Allow-Headers": "content-type, accept", 
"Access-Control-Max-Age": 10，// 秒 
"Content-Length": 0 

yy 
response.end(); 
jy 





7.2 ”修改 入 口 


此 前 ， 我 们 的 前 端 应 用 使 用 Parse.com 来 作为 后 端 应 用 的 替代 品 。 现 在 ， 我 们 切换 回 自己 的 
后 端 。( 无 痛快 速 切换 ! ) 前 端 应 用 的 源 代码 在 GitHub 上 的 rpjs/board2 目录 里 。 


在 appjjs 的 开头 ， 注 释 掉 第 一 行 本 地 运行 的 代码 ， 或 者 把 URL 的 值 换 成 你 的 Heroku 或 
Windows Azure 后 端 应 用 的 公共 URL: 





// Var URL = "http://localhost:5000/"; 
Var URL = "http://your-app-name.herokuapp.com/"; 


如 你 所 见 ， 大 部 分 appjs 里 的 代码 和 文件 夹 结 构 保 持 完 整 ， 除 了 把 Parse.com 的 模型 和 集合 





GD https://developer.mozilla.org/en-US/docs/HTTP_access_control 
© https://github.com/azat-co/rpjs/tree/master/board 


图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


2 


144 第 7 章 整合 前 后 端 





替换 成 了 原来 的 Backbone.js 的 : 





Message = Backbone.Model.extend (1{ 
url: URL + "messages/create.json" 


}) 


MessageBoard = Backbone.Collection.extend({ 
model: Message, 
url: URL + "messages/list.json" 


}); 
在 这 些 地 方 Backbone.js 查找 REST API 网 址 来 与 具体 的 集合 和 模型 相 一 致 。 


下 面 是 完整 的 rpjs/board/app.js" 文件 源码 : 


/* 
这 是 一 本 关于 JavaScript 和 Node.js 的 书 ， 
它 将 教 你 如 何 快速 创建 移动 和 Web 应 用 ， 
更 多 内 容 请 访问 : http://rapidprototypingwithjs.com 


二 

YE URL = “ttpr//iocalbostySs000 "3 
Var URL = "http://your-app-name.herokuapp.com/"; 
require(I[ 


'libs/text!header.html', 
'libs/text!home.html', 
'libs/text!footer.html'], 


funetionm ( 
headerTp]l, 
homeTpl, 
footerTpl) { 


Var ApplicationRouter = Backbone.Router.extend({ 
routes: { 


"": "home", 
"*actions": "home" 
}, 
initialize: function () { 


this.headerView = new HeaderView(); 
this.headerView.render (); 
this.footerView = new FooterView!(); 
this.footerView.render(); 

1 

home: function () { 
this.homeView = new HomeView(); 
this.homeView.render(); 

} 

3 


HeaderView = Backbone.View.extend({ 
el: "#header", 
templateFileName: "header.html", 





GD https://github.com/azat-co/rpjs/blob/master/board/app.js 


灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


7.2 


修改 入 口 


145 





template: headerTp]l, 
initializes funoetion () {> 
render: function () { 
s(this.el) .html(_.template(this.template)); 
} 
站 


FooterView = Backpbone.View.extend ({ 
el: "#footer", 
template: footerTpl, 
render: function () { 
this.s$sel.html(_.template(this.template)); 
} 
3 
Message = Backbone.Model.extend({ 
url: URL + "messages/create.json" 
}) 
MessageBoard = Backbone.Collection.extend(t{ 
model: Message, 
url: URL + "messages/list.json" 
3 


HomeView = Backbone.View.extend({ 
el: "#content", 
template: homeTpl， 
events: { 


"click #send": "saveMessage" 
}: 


initialize: function () { 
this.collection = new MessageBoard(); 
this.collection.bind("all", this.render, this); 
this.collection.fetch(); 
this.collection.on("add", function (message) { 
message.save(null, { 
success: function (message) { 
console.log('saved ' + message); 
js 
error: function (message) { 
console.log('error'); 
} 
3 
console.log('saved' + message); 
}) 
js 
saveMessage: function () { 
Var newMessageForm = $("#new-message"); 
Var username = newMessageForm.find(' [name="username"]') 
.attr('value'); 
Var message = newMessageForm.find(' [name="message"]') 
.attr('value'); 
this.collection.add(t{ 


"username": username, 
"message": message 


})3 
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} 
render: function () { 
console.log(this.collection) 
s(this.el) .html(_.templatel( 
this.template, 
this.collection 


app = new ApplicationRouter(); 
Backbone.history.start(); 
ns 


7.3 ” Chat 应 用 
Nodejs 后 端 应 用 的 源 代码 在 rpjs/node”GitHub 目录 里 ， 它 的 目录 结构 是 这 样 的 : 


/node 





-web.js 
-Procfile 
-package.json 


这 里 是 webjs 的 代码 ， 它 实现 了 CORS 的 响应 头 : 


/* 

这 是 一 本 关于 JavaScript 和 Node.js 的 书 ， 

它 将 教 你 如 何 快速 创建 移动 和 Web 应用， 

更 多 内 容 请 访问 : http://rapidprototypingwithjs.com 
*)/ 


var http require('http'); 

Var util = require('util'); 

Var querystring = require('gquerystring'); 
Var mongo = require('mongodb'); 


var host = process.env.MONGOHQ URL || 
"mongodb://localhost:27017/board"; 
//MONGOHO_ URL=mongodb://user:pass@server.mongohg.com/db_name 


mongo.Db.connect (host, function (error, client) { 
if (error) throw error:; 
Var collection = new mongo.Collection(client, 'messages'); 
Var app = http.createServer (function (request, response) { 


var origin = (request.headers.origin || "*"); 
if (request.method == "OPTIONS") { 
response.writeHead("204", "No Content", { 
"Access-Control-Allow-Origin": origin, 
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS", 
"Access-Control-Allow-Headers": "content-type, accept", 


"Access-Control-Max-Age": 10，// 秒 





QD https://github.com/azat-co/rpjs/tree/master/node 
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"Content-Length": 0 
这 
response.end(); 
} 
if (request.method === "GET" && 
request.url === "/messages/list.json") { 
collection.find() .toArray (function (error, results) { 
Var body = JSON.stringify(results); 
response.writeHead(200, { 
'Access-Control-Allow-Origin': origin, 
'Content-Type': 'text/plain', 
'Content-Length': body.length 
} 
console.log("LIST OF OBJECTS: "); 
console.dir (results); 
response.end (body); 
局 用: 
} 
if (request.method === "POST" && 
request.url === "/messages/create.json") { 
request.on('data', function (data) { 
console.1log ("RECEIVED DATA:") 
console.log(data.toSstring('utf-8')); 
collection.insert (JSON.parse(data.toString('utf-8')), 
{safe: true}, function (error, obj) { 
if (error) throw error; 
console.log("OBJECT IS SAVED: ") 
console.log(JSON.stringify (obj)) 
Var body = JSON.stringify(obj); 
response.writeHead(200, { 
'Access-Control-Allow-Origin': origin, 
'Content-Type': 'text/plain', 
'Content-Length': body.length 
})3 
response.end(body); 


}) 


}; 
}); 
var port = process.env.PORT || 5000; 
app.listen (port); 


jy 


7.4 部署 


为 了 方便 起 见 , 前 端 代码 放 在 rpjs/board" 目 录 里 ,拥有 CORS 功能 的 后 端 应 用 在 rpjs/node” 里 。 
现在 ,你 可 能 已 经 知道 应 该 做 什么 了 。 作 为 参考 ， 下 面 是 把 代码 部 署 到 Heroku 上 的 步 又 。 








GD https://github.com/azat-co/rpjs/tree/master/board 
©® https://github.com/azat-co/rpjs/tree/master/node 
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在 node 目录 执行 : 








Sgit. ni 

$ git add . 

$ git commit -am "first commit" 

$ heroku create 

$ heroku addons:add mongohq:sandbox 

$ git push heroku master 

复制 并 且 粘 贴 地 址 到 board/app.js 文件 ， 把 它 赋 值 给 URL 变量 ， 然 后 在 board 目录 里 执行 
git init 
git add . 


git commit -am "first commit" 
heroku create 

git push heroku master 
heroku open 


Vr UU UV TI 


7.5 ” 同 域 部 署 


我 们 不 推荐 在 生产 环境 中 进行 同 域 部 署 ， 因 为 静态 资源 文件 使 用 像 nginx ( 非 Node.js VO 引 
擎 ) 这 样 的 Web 服务 器 更 合适 ， 并 且 分 离 API 可 以 减少 测试 的 复杂 性 ， 提 高 程序 的 健壮 程度 ， 
更 快 的 定位 问题 和 监控 。 当 然 ， 同 域 部 署 可 以 用 来 测试 、 演 示 、 开 发 环境 或 者 微小 型 应 用 。 


这 是 一 个 Nodejs 服务 器 静态 应 用 的 例子 : 



































Var http = require("http"), 


url = require("url"), 

path = require("path"), 

fs = require("fs"), 

port = process.argv[2] || 8888; 


http.createServer (function (request, response) { 


var uri = url.parse(request.url) .pathname 
,， filename = path.join(process.cwd(), uri); 


path.exists(filename, function (exists) { 
if(!exists) { 
response.writeHead(404, { 
"Content-Type": "text/plain"}); 
response.write("404 Not Found\n"); 
response.end(); 
return; 





If (fs.statSync (filename) .isDirectory()) 
filename += '/index.html'; 


fs.readFile(filename, "binary", 
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Eb heelh ooo ee 碍 芋 二名) 乓 
i (err) { 
response.writeHead(500, 
{"Content-Type": "text/plain"}); 
response.writel(err + "\n"); 
response.end(); 
return; 
} 
response.writeHead(200) 
response.write(file, "binary"); 
response.end(); 
})3 
学 
}) .listen(parseInt (port, 10)); 


console.log("Static file server running at\n " + 
" => http://localhost:" + port + "/\nCTRL + C to shutdown"); 


注意 

A 

©@ 另外 ,更 优雅 的 方式 是 使 用 Node.js 框架 , 比如 Connect( http://www.senchalabs. 
org/connect/static.html ) 或 者 Express ( http://expressjs.com/guide.html )， 因 为 它 
们 有 专门 用 于 JS 和 CSS 资源 的 static 中 间 件 。 
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提要 : 一 些 关 于 Node.js 里 异步 的 本 质 的 文章 ， 通 过 Mocha 使 用 TDD; 介绍 Express.js、 
Monk 、Wintersmith 、Derby 等 框架 和 库 。 





为 了 方便 本 书 的 读者 使 用 ， 在 这 章 我 们 引入 了 一 些 Webapplog.com 上 关于 Node.js 的 文章 。 
Webapplog.com 是 一 个 公开 的 关于 Web 开发 的 博客 。 





8.1 Node 里 的 异步 


8.1.1 非 阻塞 VO 


与 使 用 Python 或 者 Ruby 相 比 ， 使 用 Node.js 最 大 的 好 处 是 有 非 阻塞 VO 机 制 。 为 了 说 明 这 
一 点 ,我 们 以 星巴克 咖啡 店 里 的 队伍 为 例 。 假 设 每 个 人 排队 领取 咖啡 是 一 个 任务 , 那么 柜台 后 面 
所 有 的 人 和 物 , 例如 收银 机 、 注 册 以 及 服务 生 ， 都 像 是 服务 器 或 者 服务 器 应 用 。 当 我 们 要 一 杯 普 
通 的 咖啡 ， 比 如 Pike Place 、hot tea 或 者 Earl Grey， 服 务 生 会 制作 它 。 整 个 队伍 咖啡 制作 过 程 中 
都 会 等 待 ， 且 每 个 人 付 适当 的 费用 。 


当然 ， 上 述 那 些 饮 品 ( 众所周知 是 “ 耗 时 的 瓶颈 ”) 制作 上 都 很 简单 ， 只 需要 倒 出 液体 ， 就 
可 以 做 好 。 但 是 choco-mocha-frappe-latte-soy-decafs 怎么 办 ? 如果 队 列 中 每 个 人 都 决定 购买 这 种 
耗 时 的 饮料 呢 ?” 这 个 队列 会 停滞 不 前 ,并 且 变 得 越 来 越 长 ,咖啡 店 的 经 理 必须 增加 更 多 的 服务 生 ， 
甚至 自己 开始 收银 。 

这 样 不 太 好 ， 对 吧 ? 但 这 个 比喻 生动 地 展现 了 除 Node.js 以 外 所 有 服务 器 端 技术 都 会 遭遇 的 


情况 ， 就 像 是 真正 的 一 家 星巴克 咖啡 店 。 当 你 下 单 的 时 候 ， 服 务 生 把 订单 传递 给 别 的 雇员 ， 你 离 
开 队 列 。 队 伍 移动 ， 处 理 融 异步 处 理 并 且 不 会 阻止 队列 。 




















QD http://en.wikipedia.org/wiki/Drew_Houston 
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这 就 是 Node.js 能 够 在 性 能 和 扩展 上 打败 同类 产品 ( 也许 底层 的 C++ 除外 ) 的 原因 。 使 用 
Nodejs， 你 将 不 需要 大 量 的 CPU 和 服务 器 来 处 理 人 负载 。 


8.1.2 异步 编码 方式 


异步 需要 程序 员 有 不 同 于 自 己 所 多 悉 的 Python 、PHP、C 或 Ruby 的 思路 。 因 为 如 果 忘 记 在 
执行 的 时 候 返 回 正 确 的 表达 式 ， 这 非常 容易 引发 错误 。 


下 面 这 个 简单 的 例子 描述 了 这 种 情况 : 


var test = function (callback) { 
return callback(); 
console.1log('test') // 不 会 被 打印 
} 


var test2 = function (callback) { 
callback(); 
console.log('test2') // 第 三 个 被 打印 
} 


test(function () { 
console.log('callback1l') // 第 一 个 被 打印 
test2 (function () { 


console.log('callback2') // 第 二 个 被 打印 
}) 
))3 


如 果 我 们 不 使 用 return callback() ， 仅 仅 使 用 callback () ， 字 符 串 test2 将 会 打印 
出 来 ，test 不 会 


callback1 
callback2 
test2 


娱乐 一 下 ， 我 给 callback2 字符 串 添加 了 一 个 延迟 setTimeout () ， 现 在 顺序 改变 了 : 


var test = function (callback) { 
return callback(); 
console.1log('test') // 不 会 被 打印 
} 








var test2 = function (callback) { 
callback (); 
console.log('test2') // 第 二 个 被 打印 
} 


test(funetion (1{ 
console.log('callback1l') // 第 一 个 被 打印 
test2 (function () { 
setTimeout (function () { 
console.log('callback2') // 第 三 个 被 打印 
}, 100) 


}) 
} >) 





图 灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


152 第 8 章 福利 : Webapplog 上 的 文章 





打印 : 


callbackl 
tes2 
callback2 


最 后 的 例子 展示 了 两 个 并 行 运行 的 独立 函数 。 较 快 的 函数 将 会 比较 慢 的 那个 更 早 结束 。 再 回 


到 星巴克 的 例子 ,这 意味 着 ,你 可 能 会 比 队伍 里 排 在 你 前 面 的 人 更 快 得 到 自己 的 饮料 。 对 用 户 更 
友好 ， 对 编程 也 更 好 ! 


























8.2 使 用 Monk 迁移 MongoDB 


最 近 ， 我 们 的 一 个 高 等 用 户 抱怨 他 的 Storify "账户 不 能 登录 。 我 们 检查 了 产品 数据 库 ， 发 现 
可 能 有 人 用 这 个 账户 的 用 户 名 和 密码 登录 并 且 亚 意 删除 了 它 。 多 亏 了 伟大 的 MongoHQ 服务 ,我 
们 得 以 在 15 分 钟 内 恢复 数据 库 。 进 行 这 个 操作 有 两 种 选择 : 


(1) Mongo shell 脚本 ; 
(2) Nodejs 程序 。 














因为 这 个 Storify 用 户 账户 删除 了 所 有 相关 的 对 象 ， 如 验证 、 关 系 ( 关注、 被 关注 )、 喜 欢 、 
故事 等 ,我们 决定 使 用 第 二 种 方案 。 它 工作 得 非常 梭 ， 这 里 有 一 个 简洁 版 ， 你 可 以 在 MongoDB 
迁移 中 使 用 (也 放 在 了 gist.github.com/4516139? 里 )。 


现在 我 们 来 加 载 所 有 的 模块 : Monk”、Progress” 、Async 以 及 MongoDB: 


Var async = require('async'); 

Var ProgressBar = require('progress'); 

Var monk = require('monk'); 

Var ObjectId = require('mongodb') .ObjectID; 








顺便 说 一 下 ,Monk 是 由 LeanBoost" 开 发 , 它 是 Node.js 里 使 用 MongoDB 的 一 个 简易 且 对 用 
户 友 好 的 封装 。 


Monk 使 用 下 面 的 连接 字符 串 格 式 : 





username:password@dbhost:port/database 





(WY http://storify.com 

© https://gist.github.con/4516139 

© https://github.com/LearnBoost/monk 

(@ https://github.com/visionmedia/node-progress 
G) https://github.com/caolan/asynce 

© https://www.learnboost.com/ 
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创建 下 面 的 对 象 : 


Var dest = monk('localhost:27017/storify_localhost'); 
Var backup = monk('localhost:27017/storify backup'); 


我 们 需要 知道 要 保存 的 对 象 的 ID: 

var userId = ObjectId (YOUR-OBJECT-ID); 

这 是 人 工 输入 的 restore () 函数 , 它 可 以 通过 指定 特定 的 查询 重复 使 用 已 经 保存 的 对 象 ( 更 
多 关于 MongoDB 查询 的 内 容 ， 请 查看 文章 “Querying 20M-Record MongoDB Collection””)。 如 
果 想 调用 它 ， 只 需要 把 集合 的 名 字 以 一 个 字符 串 传 人 , 比如 "stozries", 并 且 从 主 对 象 里 取 值 关 
联 对 象 ， 比 如 {userId:user.id}。 进 度 条 可 以 在 终端 里 形象 展示 当前 进度 : 


var restore = function (collection, query, callback) { 
console.info('restoring from ' + collection); 
var q = query; 
backup.get (collection) .count (gq, function (e, n) { 








console.log('found ' +n+' ' + collection); 
if (e) console.error(e); 
Var bar = new ProgressBar('[:bar] :current/:total' 


+ ':percent :etas' 
， { total: n - 1, width: 40 }) 
var tick = function (e) { 
if (e) 1{ 
console.error (e); 
bar.tick():s 
} 
else { 
bar.tick(); 
} 
if (bar.complete) { 
cinsole.1o0g(); 
console.log('restoring ' + collection + ' is completed'); 
callback(); 
} 
}s 
Tt (I SS OY 
console.log('adding ' +n+' ' + collection); 
backup.get (collection) .find(qgq, { 
stream: true 
}).each(function (element) { 
dest.get (collection) .insert (element, tick); 
})3 
} else { 
callback (); 


} 
} 


现在 我 们 使 用 async 来 调用 上 面 提 到 的 restore () 函数 : 








GD http://www.webapplog.com/querying-20m-record-mongodb-collection/ 
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async.series({ 
restoreUser: function (callback) { // 导入 用 户 元 素 
backup.get('users') .find({_id: userId}, { 
stream: true, limit: 1 
}) .each (function (user) { 
dest.get('users').insert(user, function (e) { 
if (e) { 
console.1logl(e); 
} 
else { 
console.log('resored user: ' + user.username); 
} 
callback(); 
} 
a 
站 


restoreIdentity: function (callback) { 
restore('identities', { 
userid: userId 
}, callback); 
> 
restoreStories: function (callback) { 
restore('stories', {authorid: userIid}, callback); 


}, function (e) { 
console.1og(); 
console.log('restoring is completed!'); 
process .exit (1); 
二 


完整 的 代码 在 gist,github.com/45161392 里 ， 下 面 也 是 : 


Var async = require('async'); 

Var ProgressBar = require('progress'); 

Var monk = require('monk'); 

Var ms = require('ms'); 

Var ObjectId = require('mongodb') .ObjectID; 


var dest = monk('localhost:27017/storify_ localhost'); 
Var backup = monk('localhost:27017/storify backup'); 


var userId = ObjectId(YOUR - OBJECT - ID); 
// monk 会 自动 分 配 ， 但 是 我 们 需要 用 它 来 进行 查询 


Var restore = function (collection, query, callback) { 
console.info('restoring from ' + collection); 
Var q = query; 
backup .get (collection) .count (gq, function (e, n) { 
console.log('found ' +n+' ' + collection); 
if (e) console.error(e); 





GD https://gist.github.conm/4516139 
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Var bar = new ProgressBar!( 
'[:bar] :current/:total :percent :etas', 
{ total: n - 1, width: 40 }) 
var tick = function (e) { 
if (e) { 
console.error (e); 
bar.tick(); 
} 
else { 
bar.tick(); 
} 
if (bar.complete) { 
console,1og(); 
console.log('restoring ' + collection + ' is completed'); 
callback (); 
} 
) 3 
(i 0》 
console.log('adding ' +n+' ' + collection); 
backup.get (collection) .find(qgq, { stream: true }) 
.each (function (element) { 
dest.get (collection) .insert (element, tick); 
有 
} else { 
callback(); 


} 


async.series({ 
restoreUser: function (callback) {// 导入 用 户 元 素 
backup .get('users').find({_id: userId}，{ 
stream: true, 


Ti 1) 

.each (function (user) { 

dest.get('users').insert(user, function (e) { 
if (e) { 


console.log(e); 
} 
else { 
console.log('resored user: ' + user.username); 
} 
callback (); 
7 
3 
js 


restoreIdentity: function (callback) { 
restore('identities', { 
userid: userId 
}s, CaLllback}: 
js 


restoreStories: function (callback) { 
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restore('stories', {authorid: userIid}, callback); 


} 


}, function (e) { 

console.1o0g(); 

console.log('restoring is completed!'); 
process .exit (1); 


3 
运行 npm insall/npm update 并 有 目 修 改 硬 编码 的 数据 库 值 来 运行 它 。 


8.3 在 Node.js 里 使 用 Mocha 实践 TDD 


8.3.1 谁 需要 使 用 测试 驱动 的 开发 


设想 一 下 你 要 在 一 个 已 经 存在 的 接口 上 实现 一 个 复杂 的 功能 ， 比 如 在 评论 上 添加 一 个 “like” 
( 赞 ) 按钮 。 在 没有 测试 的 情况 下 ， 必 须 人 工 创建 用 户 ， 登 录 ， 创 建文 章 ， 创 建 另 一 个 用 户 ， 登 
录 , 赞 这 个 文章 ,很 令 人 厌烦 吧 ? 如 果 你 需要 重复 这 个 步骤 10 到 20 次 来 发 现 和 修复 某 些 bug 呢 ? 
如 果 你 新 添加 的 功能 破坏 了 已 经 有 的 功能 , 而 且 在 没有 测试 的 情况 下 , 6 个 月 后 才 发 现 这 一 漏洞 ， 
怎么 办 呢 ? 

不 要 为 一 次 性 的 代码 写 测试 , 但 是 针对 主 代码 , 请 养 成 测试 驱动 的 习惯 。 只 需要 在 开始 的 时 
候 花 点 儿 时 间 , 你 和 你 的 团队 稍 后 就 可 以 节约 很 多 时 间 并 且 在 发 布 的 时 候 更 有 自信 。 测试 驱动 开 
发 真 的 是 益处 多 多 的 好 事情 | 



































8.3.2 ”快速 开始 指南 
请 按照 这 个 快速 指南 使 用 Mocha" 来 设置 测试 驱动 开发 环境 。 
执行 下 面 的 命令 ， 全 局 安装 Mocha”; 
$ sudo npm install -9 mocha 


我 们 还 要 使 用 另外 两 个 库 : LearnBooste 的 Superagent 和 expect.js”。 安 装 它们 ， 在 项 目 目 录 
里 使 用 NPM 命令 ?: 


$ npm install superagent 
$ npm install expect.js 











QD http://visionmedia.github.com/mocha/ 

© http://visionmedia.github.com/mocha/ 

@® https://github.com/LearnBoost 

(@ https://github.com/visionmedia/superagent 
©) https://github.com/LearnBoost/expect.js/ 
© https:/npmjs.org/ 
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打开 一 个 新 的 .js 文件 ， 输 入 : 


Var request = require('superagent'); 
Var expect = require('expect.js'); 


目前 我 们 已 经 载 人 了 两 个 库 。 测 试 套件 的 结构 看 起 来 是 这 样 的 : 
describe('Suite one', function () { 
it(function (done) { 
)); 
it(function (done) { 
月》 
} 
describe('Suite two', function () { 
it(function (done) { 
)); 
上 3 
在 这 个 封闭 包 里 ， 我 们 写 一 个 针对 我 们 的 服务 器 的 请 求 ， 假 设 它 在 localhost:8080”: 


it(function (done) { 

request.post('localhost:8080') .end(function (res) { 
//TODO 检查 响应 是 否 正 确 
})3 
二 : 


Expect 提供 了 用 来 检查 返回 是 否 正确 的 便捷 函数 : 


expect (res) .to.exist; 
expect (res.status) .to.equal (200);，; 
expect (res.body) .to.contain('world'); 


最 后 ， 我 们 需要 添加 aone () 调用， 告诉 Mocha， 这 个 异步 测试 已 经 完成 。 我 们 第 一 个 测试 
的 完整 代码 如 下 : 


Var request = require('superagent'); 
Var expect = require('expect.js'); 


describe('Suite one', function () { 
it(function (done) { 
request.post('localhost:8080') .end(function (res) { 
expect (res) .to.exist; 
expect (res.status) .to.equal (200); 
expect (res.body) .to.contain('world'); 
done () ; 
})s 
站 








人 http://localhost:8080 
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如 果 我 们 想 在 请 求 前 处 理 ， 可 以 添加 before 和 beforeEach 钩子 ， 顾 名 思 义 ， 它 们 在 每 


一 个 测试 (或 测试 套件 ) 运行 前 执行 : 


before(function () { 
//TODO 初始 化 数据 库 
} >) 
describe('suite one ', function () { 
beforeEach(function () { 
//TODO 登录 测试 用 户 
局 
it('test one', function (done) { 
Do 


请 注意 , before 和 beforeEach 可 以 放 在 describe 里 , 也 可 以 放 在 外 面 ,运行 这 个 测试 ， 


简单 执行 : 
$ mocha test.sj 
使 用 不 同 的 报告 类 型 : 


$ mocha test.js -R list 
$ mocah test.js -R spec 


8.4 ” Wintersmith: 静态 网 站 生成 器 





针对 这 本 书 的 单 页 网 站 rapidprototypingwithjs.com”， 我 使 用 Wintersmith ?来 学 习 并 快速 启动 
了 一 些 东 西 。 Wintersmith 是 一 个 Node.js 静态 网 站 生成 器 。 它 的 可 扩展 和 方便 的 部 署 带 给 了 我 极 
大 的 震 憾 。 男 外 ， 这 里 还 有 几 个 我 最 喜欢 的 工具 ， 比 如 Markdown”、Jade 和 Underscrore " 。 




















为 什么 选择 静态 网 站 生成 器 





这 里 有 一 个 文章 解释 了 为 什么 一 般 情况 下 使 用 静态 网 站 生成 器 是 好 主意 : 


Static Site Generators”。 它 依据 的 是 下 面 几 样 重要 的 东西 。 
模板 











An Introduction to 


可 以 使 用 诸如 Jade" 的 模板 引擎 。Jade 使 用 空格 来 组 织 级 联 元 素 ， 它 的 语法 和 Ruby on Rail's 


的 Haml 标记 很 像 。 





GD http:/rapidprototypingwithjs.com 

© http://jinordberg.github.com/wintersmith/ 

© http://daringfireball.net/projects/markdown/ 

(@ http://underscorejs.org/ 

G@) http://www.mickgardner.com/2012/12/an-introduction-to-static-site.html 
(© https://github.com/visionmedia/jade 
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Markdown 


我 曾经 从 自己 某 本 书 的 介绍 章节 复制 markdown 文本 ， 并 且 没 做 任何 修改 直接 使 用 它 。 
Wintersmith 使 用 了 marked? 作 为 Markdown 解析 器 。 更 多 关于 为 什么 Markdown 是 很 棒 的 ， 请 参 
考 我 的 文章 : Markdown Goodness”。 


简单 的 部 署 


所 需 的 东西 是 HTML、CSS 和 JavaScript， 所 以 你 只 需要 使 用 一 个 FTP 客户 端 上 传 它们 ， 比 
如 Panic 的 Transmit 或 Cyberduck”。 


基本 服务 


由 于 任何 静态 Web 服务 器 都 可 以 正常 工作 , 没 必要 使 用 Heroku 或 者 Nodejitsu 私有 云 , 甚至 
PHP/MySQL 托管 服务 。 





























没有 数据 库 调 用 ， 没 有 服务 器 端 API 调用 ， 也 不 会 有 CPU 或 内 存 过 载 。 
灵活 性 
Wintersmith 可 以 为 内 容 和 模板 加 载 插件 ， 你 也 可 以 写 一 个 自己 的 插件 ”。 


8.4.1 开始 使 用 Wintersmith 


github.comyjnordberg/wintersmith "这 里 有 快速 指南 。 
全 局 安装 Wintersmith， 使 用 -g 参数 和 sudo 来 运行 NPM[: 
$ sudo npm install wintersmith -g 
使 用 默认 的 博客 模板 来 运行 : 
$ wintersmith new <path> 
或 者 使 用 一 个 空 网 站 : 
$ wintersmith new <path> -template basic 
或 者 使 用 快捷 方式 : 


$ wintersmith new <path> -T basic 








GD https://github.com/chjj/marked 

© http://www.webapplog.com/markdown-goodness/ 

@ http:/www.panic.com/transmit/ 

(@ http://cyberduck.ch/ 

©) https://github.com/jnordberg/wintersmith#content-plugins 
© https://github.com/jnordberg/wintersmith 
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类 似 Ruby on Rails 支架 ，Wintersmith 将 生成 一 个 带 有 内 容 和 模板 目录 的 基本 框架 。 预 览 这 
个 网 站 ， 运 行 下 面 的 命令 : 


S.C <path> 
$ wintersmith preview 
$ open http://localhost:8080 


大 多 数 的 改变 在 预览 模式 下 可 以 自动 更 新 ，config.json 文件 "除外 。 图 像 、CSS、JavaScript 
和 其 他 文件 会 移动 到 contents 文件 来。Wintersmith 生成 器 用 的 是 下 面 的 逻辑 : 


(1) 查找 contents 目录 里 的 * md 文件 ; 

(2) 阅读 metadata ， 例 如 模板 名 ; 

(3) 处 理 每 一 个 *.md 文件 里 后 级 名 为 *.jade 的 模板 ”里 的 metadata。 
当 你 创建 好 了 自己 的 静态 网 站 ， 运 行 


$ wintersmith build 





8.4.2 其 他 静态 网 站 生成 器 
文 里 还 有 一 些 别 的 Nodejs 静态 网 站 生成 器 : 


口 Docpad 

口 Blacksmith® 
口 Scotch” 

口 Wheat 

口 Petrify” 


关于 这 些 静 态 网 站 生成 器 更 详细 概述 参见 : Nodejs Based Static Site Generators”。 
其 他 语言 如 Rails 和 PHP 的 生成 器 , 请 查看 :“ 按 Github 关注 数 排序 的 静态 网 站 生成 器 列表 ”" 


和 “mother of all site generator lists”?。 











GD https://github.com/jnordberg/wintersmith#config 

© https://github.com/jnordberg/wintersmith#the-page-plugin 
© https://github.com/jnordberg/wintersmith#templates 

(@ https://github.com/bevry/docpad#readme 

© https://github.com/flatiron/blacksmith 

© https://github.com/techwraith/scotch 

© https://github.com/creationix/wheat 
https://github.com/caolan/petrify 

© http://blog.bmannconsulting.com/node-static-site-generators/ 
(0 https://gist.github.com/2254924 

DD http://nanoc.stoneship.org/docs/1-introduction/#similar-projects 
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8.5 ”Express.js 教程 : 使 用 Monk 和 MongoDB 的 简单 REST API 应 用 


使 用 Express.js 和 Monk 构 建 REST API 应 用 








这 个 应 用 是 mongou 记 的 开始 ， 它 是 使 用 Node.js 为 MongoDB 编写 的 相当 于 phpMyAdmin 的 
应 用 ， 目 的 是 提供 一 个 友好 的 管理 员 界 面 。 它 有 点 像 Parse.com、Firebase.com、MongoHQ”) 和 
MongoLab”， 但 是 不 会 把 它 变 成 特定 的 服务 。 为 什么 每 次 查找 用 户 信 息 我 们 需要 输入 
db.users.findone({'_id':0bjectId('...')})? 可 供 选用 的 MongoHub "Mac 应 用 也 拥有 
同样 的 功能 ， 而 且 是 免费 的 ， 但 使 用 起 来 比较 笨重 ， 并 且 不 是 基于 Web 的 。 


Ruby 的 热衷 者 乐于 把 Express 和 Sinatra "框架 进行 对 比 。 在 创建 应 用 的 方式 上 它们 都 很 灵活 。 
应 用 路 由 设置 代码 类 似 ， 即 app .get (' /products/:id',showProduct);。Express.js 当前 的 
版 本 是 3.1， 为 了 辅助 Express ， 我 们 使 用 Monk" 模 块 。 


我 们 将 使 用 NPM ( Node Package Manager )”， 它 在 Nodejjs 安装 时 已 经 附带 安装 。 如 果 你 还 
没有 安装 它 ， 可 以 在 npmjs.ore* 下 载 。 


创建 一 个 新 文件 夹 和 NPM 配置 文件 package.json， 在 它 里 面 写 入 下 面 的 内 容 : 
{ 























"name": "mongoui", 

"version"™: "0.0.1", 

"engines": { 
"node": ">= v0.6" 


js 

"dependencies": { 
"mongodb": "1.2.14", 
momnkY ss . 30 71m; 
"express": "3.1.0" 
} 

} 


现在 运行 npm install 下 载 并 安装 模块 到 node_module 目录 ,如果 一 切 正常 ,在 node_module 
目录 里 可 以 看 到 很 多 目录 。 为 了 保持 简洁 ， 我 们 把 应 用 中 所 有 代码 都 放 在 一 个 index.js 文件 里 : 











GD http://gitbhub.com/azat-co/mongoui 
@) http://mongohq.com 

@® http://mongolab.com 

@ http://mongohub.todayclose.com/ 
G) http://www.sinatrarb.com/ 

© https://github.com/LearnBoost/monk 
© http:/npmjs.org 

http:/npmjs.org 
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加 


是 


Var mongo = require('mongodb'); 

Var express = require('express'); 

Var monk = require('monk'); 

Var db = monk('localhost:27017/test'); 
Var app = new express(); 


app.use (express.static(_ dirname + '/public')); 
app.get('/', function (req, res) { 
db.driver.admin.listDatabases (function (e, dbs) { 
res.json(dbs); 
}); 
下 
app.get('/collections', function (req, res) { 
db.driver.collectionNames (function (e, names) { 
res.json (names); 
} 
过 
app.get('/collections/:name', function (req, res) { 
var collection = db.get (req.params.name); 
collection.find({}, {limit: 20}, function (e, docs) { 
res.json(docs) 
} 
上 
app.listen(3000) 


让 我 们 把 代码 拆 开 来 一 点 一 点 分 析 ， 首 先是 引入 模块 声明 : 


Var mongo = require('mongodb'); 
Var express = require('express'); 
Var monk = require('monk'); 


数据 库 和 Express 应 用 的 实例 化 : 


Var db = monk('localhost:27017/test'); 
Var app = new express(); 


告诉 Express 应 用 从 public 目录 加 载 和 服务 器 静态 文件 : 


app.use (express.static( dirname + '/public')): 


首页 ， 也 叫 根 路 由 的 设置 : 


app.get('/', function (req, res) { 
db.driver.admin.listDatabases (function (e, dbs) { 
res.json(dbs); 
a 


get () 函数 需要 两 个 参数 :字符 串 和 函数 。 字 符 串 可 以 包含 斜 线 和 冒号 , 比如 product/ :iqd。 


’ 








数 必须 有 两 个 参数 : 请 求 和 响应 。 请 求 包含 所 有 的 诸如 查询 字符 串 、 会 话 和 首部 的 信息 ， 响 应 
需 


要 返回 的 结果 。 在 这 个 例子 里 ， 我 们 调用 res .json() 函数 来 返回 。 
如 你 所 料 ，dpb.driver.admin.1listDatabases() 以 异步 的 方式 返回 数据 库 列表 。 
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其 他 两 个 路 由 以 和 get () 相似 的 形式 设置 : 


app.get('/collections', function (req, res) { 
db.driver.collectionNames (function (e, names) { 
res.json(names); 
}) 
上 
app.get('/collections/:name', function (req, res) { 
var collection = db.get (regq.params .name); 
collectionm, find({}, {limit: 20}, function (eé;: does) 1{ 
res.json(docs) 
0 
四) 


Express 非常 便于 支持 其 他 HTTP 动作 ， 比 如 post 和 update。 在 设置 post 路 由 的 时 候 ， 
我 们 这 样 写 : 

app.post('product/:id',function(req,res) {...}); 

Express 也 支持 中 间 件 。 中 间 件 是 一 个 请 求 处 理 函 数 , 它 的 三 个 参数 为 : request、response 
和 next。 比 如 : 


app.post('product/:id', 
authenticateUser， 
ValidateProduct， 
addProduct 

); 


’ 





function authenticateUser (req, res, next) { 
/ /通过 检查 req.session 来 验证 用 户 
next (); 


. 


function validateProduct (req, res, next) { 
// 校 验 提交 的 数据 
next (); 


. 


function addProduct (req, res) { 
/ /保存 数据 到 数据 库 
} 


validateProduct 和 authenticateProduct 是 中 间 件 ,在 大 项 目 中 人 们 通常 把 它们 放 到 
单独 的 文件 里 。 

男 一 个 在 Express 应 用 里 设置 中 间 件 的 方式 是 使 用 use () 函数 。 例 如 ， 之 前 我 们 为 静态 资源 
所 做 的 : 


app.use (express.static(_ dirname + '/public')); 
我 们 同样 可 以 这 样 处 理 错误 : 


app.use (errorHandler); 
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假定 ， 我 们 已 经 安装 了 MongoDB， 这 个 应 用 会 连接 到 它 ( localhost:27017"” ) 并 且 展 示 和 集合 
的 名 字 和 它 里 面 的 项 目 。 打 开 mongo 服务 器 : 


$ mongod 
运行 这 个 应 用 (保持 mongod 终端 呈 打 开 状 态 ): 
$ node 
或 者 : 
$ node index.js 


查看 应 用 的 工作 状态 ,使 用 Chrome 打开 localhost:30002 ， 使 用 JSONViewer* 进 行 扩展 ( 它 
可 以 以 更 友好 的 方式 展示 JSON )。 














8.6 ”Express.js 教程 : 参数 、 错 误 处 理 及 其 他 中 间 件 


8.6.1 请 求 处 理子 数 


Express.js 是 一 个 node.js 框架 ， 相 比 于 其 他 ， 它 提供 了 组 织 路 由 的 方式 。 每 一 个 路 由 通过 把 
URL (也 可 以 使 用 正则 表达 式 ) 作为 第 一 个 参数 调用 应 用 对 象 上 的 函数 。 例 如 : 




















app.get('api/vil/stories/', function (res, req) { 
}) 
或 者 用 PosT 方法 : 


app.post('api/vil/stories/' function (req, res) { 





eR 
不 用 多 说 ，DELETE 和 PUT 方法 也 被 给 予 很 好 的 支持 ?。 


我 们 传递 给 get () 或 者 post () 方 法 的 回调 叫做 请 求 处 理 函 数 ， 因 为 它们 会 接收 并 处 理 请 求 
( req )， 然 后 写 入 到 响应 ( res ) 对 象 。 例 如 : 





app.get('/about', function (req, res) { 
res.send('About Us: ...'); 


Ds 





© http://localhost:27017 

© http://localhost:3000 

@) https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbonpoihckbnefhakgolnmc?hl=en 
(@ http://expressjs.com/api.html#app.VERB 
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我 们 可 以 使 用 多 个 请 求 处 理 函 数 ,因此 它们 的 名 字 叫 中 间 件 。 它 们 接收 第 三 个 参数 , 即 next， 
调用 它 ( next () ) 就 会 顺序 执行 下 一 个 请 求 处 理 函 数 : 


app.get('/api/vil/stories/:id', function (req, res, next) { 
/ /进行 授权 验证 
/ /如果 没 有 通过 验证 或 者 有 错误 ， 返回 next (error); 
/ /如果 通 过 并 且 没 有 错误 
return next(); 
}), function (req, res, next) { 
// 获 取 ia 并 且 从 数据 库 里 取 回 数据 
// 如 果 没 有 错误 ， 保 存 Story 到 请 求 对 象 上 
req.story = story; 
return next(); 
}), function (req, res) { 
// 输 出 数据 库 查 询 的 结果 
res.send(res.story); 


有 
我 们 需要 用 URL 字符 串 里 的 ID 参数 查询 它 在 数据 库 里 对 应 的 匹配 项 。 


8.6.2 ”参数 处 理 中 间 件 


参数 是 请 求 URL 里 的 对 应 值 。 如 果 我 们 没有 Express.js 或 者 类 似 的 库 而 使 用 核心 Node.js 模 
块 ， 我 们 必须 使 用 HTTPrequest” 对 象 ， 然后 使 用 require('querystring') .parse (url) 或 
require('url') .parse (url，true) 这样 的 处 理 。 


多 亏 了 Connect* 框 架 和 VisionMedia” 方 面 的 人 员 ，Express.js 得 以 以 中 间 件 形式 来 支持 参数 ， 
处 理 错误 ， 并 且 具 备 其 他 很 多 重要 功能 。 下 面 是 我 们 如 何在 应 用 里 处 理 参数 : 


app.param('id', function (req, res, next, id) { 
// 使 用 id 做 一 些 事情 
// 保 存 id 或 者 其 他 信息 到 请 求 对 象 中 
// 完 成 后 调用 next 
next (); 


用 





app.get('/api/vil/stories/:id', function (req, res) { 
/ /参数 处 理 中 间 件 将 在 此 之 前 执行 
/ /我 们 期 待 请 求 对 象 上 已 经 有 了 需要 的 信息 
// 输 出 一 些 东 西 
res.send(data); 


让 
例如 : 


app.param('id', function (req, res, next, id) { 
req.db.get('stories').findone({_id: id}, function (e, story) { 








GD http://nodejs.org/api/http.html#http_http_request_options call back 
© http://www.senchalabs.org/connect/ 
@® https://github.com/visionmedia/express 
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if (e) return next(e); 
IE (!story) return next (new Error('Nothing is found')); 


req.story = story; 
next (); 
下 
es 


app.get('/api/vil/stories/:id', function (req, res) { 
res.send(req.story); 
下 


或 者 我 们 使 用 多 个 请 求 处 理 函 数 ， 原 理 也 一 样 : 可 以 预期 获取 req .story 对 象 或 者 一 个 之 
前 执行 里 抛 出 的 错误 ， 因 此 可 以 抽象 出 获取 参数 及 其 各 自 对 象 的 通用 代码 /逻辑 : 





app.get('/api/vl/stories/:id', function (req, res, next) { 


/ /授权 验证 


}) ， 
// 已 经 有 对 象 在 req.story， 所 以 这 里 不 需要 做 什么 


function (req, res) { 
// 输 出 数据 库 查 询 的 结果 
res.send(story); 

二 


登录 校 验 和 输入 过 滤 也 非常 适合 放 在 中 间 件 里 。 
param() 函数 非常 酷 ， 因 为 它 可 以 合并 不 同 的 参数 ， 比 如 : 


app.get('/api/vl/stories/:storyId/elements/:elementId', 





function (req, res) { 
res.send(req.element); 


} 
ee 


8.6.3 ”错误 处 理 


错误 处 理 通常 贯穿 
同 的 参数 ， 只 是 多 了 一 个 error: 


app.use(function (err, req, res, next) { 
// 日 志 记 录 和 用 户 友 好 的 错误 消息 输出 
res.send(500); 

} 


事实 上 ， 响 应 可 以 是 任何 东西 ， 如 下 。 
JSON 字符 串 





于 整个 程序 生命 周期 , 所 以 它 最 好 也 是 以 一 个 中 间 件 的 形式 存在 。 它 有 相 





app.use(function (err, req, res, next) { 
// 日 志 记 录 和 用 户 友 好 的 错误 消息 输出 
res.send(500, {status: 500, 
message: 'internal error', 
type: 'internal'} 
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); 
}) 


纯 文本 信息 


app.use(function (err, req, res, next) { 
// 日 志 记 录 和 用 户 友 好 的 错误 消息 输出 
res.send(500, 'internal server error'); 


}) 
错误 页 


app.use(function (err, req, res, next) { 
// 日 志 记 录 和 用 户 友 好 的 错误 消息 输出 
/ /假设 模板 引 党 已 经 添加 过 
res.render('500'); 

}) 


跳 转 到 一 个 错误 页 


app.use(function (err, req, res, next) { 
// 日 志 记 录 和 用 户 友 好 的 错误 消息 输出 
res.redirect('/public/500.html'); 

}) 


十 误 HTTP 响应 码 (401、400、500 等 ) 


app.use(function (err, req, res, next) { 
// 日 志 记 录 和 用 户 友 好 的 错误 消息 输出 
res.end(500); 

}) 


顺便 提 一 下 , 日志 也 可 以 抽象 成 一 个 中 间 件 。 
在 请 求 处 理 函 数 或 者 中 间 件 里 触发 错误 ， 只 需要 这 样 的 调用 : 
next (error) 
或 者 : 
next (new Error('Something went wrong :-('); 


你 也 可 以 使 用 多 个 错误 处 理 孔 数 ,并 使 用 具名 函数 ,而 不 是 使 用 匿名 函数 ,Express.js Error handling 
guide" 里 有 相关 的 例子 。 























8.6.4 其 他 中 间 件 


除了 提取 参数 ， 它 还 可 用 于 其 他 很 多 情况 ， 比 如 登录 校 验 、 错 误 处 理 、 会 话 以 及 输出 等 。 
res .json() 就 是 它们 中 的 一 个 。 它 把 JavaScript/Node.js 对 象 友好 地 转化 为 JION， 例 如 : 








GD http://expressjs.com/guide.html#error_ handling 
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app.get('/api/vil/stories/:id', function (req, res) { 
res.json(req.story); 
} 3 


在 req.story 是 数组 或 者 对 象 的 时 候 等 同 于 : 


app.get('/api/vil/stories/:id', function (req, res) { 
res.send(req.story); 
下 


或 者 : 


app.get('api/vil/stories/:id', function (req, res) { 
res.set({ 
'Content-Type': 'application/json' 
}); 
res.send(req.story); 
这 


8.6.5 抽象 


中 间 件 很 灵活 , 可 以 使 用 匿名 或 者 具名 函数 , 最 好 的 方式 是 把 请 求 处 理 函 数 按 功 能 抽象 到 单 
独 的 外 部 模块 里 : 


Var stories = require.('./routes/stories'); 
Var elements = require.('./routes/elements'); 
Var users = require.('./routes/users'); 


app.get('/stories/,stories.find); 
app.get('/stories/ :storyId/elements/ :elementId' ，elements.findq) ; 
app.put('/users/:userlid', users.update); 


routes/stories.js: 


module.exports.find = functionl(req,res, next) { 


3 
routes/elements.js: 


module.exports.find = function(req,res,next)t{ 


}; 
routes/users.js: 


module.exports.update = function(req,res,next)t{ 
}3 


我 们 可 以 使 用 一 些 函 数 式 编程 的 技巧 ， 比 如 : 


function requiredParamHandler (param) { 
// 使 用 param 做 一 些 事情 ， 比 如 
/ /检查 它 是 否 出 现在 请 求 字 符 囊 中 
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return function (req, res, next) { 
// 使 用 param， 比 如 如 果 token 有 效 的 ， 调 用 next () 
next (); 
} 
} 


app.get('/api/vi/stories/:id', 
requiredParamHandler ('token'), 
story.show 


); 


var story = { 
show: function (reqg, res, next) { 
// 一 些 逻 辑 处 理 ， 比 如 限制 需要 输出 的 字段 
return res.send(); 
} 
} 


如 你 所 见 ， 中间 件 在 组 织 代码 时 是 非常 有 用 的 原则 。 最 佳 实践 是 保持 路 由 程序 简洁 精 短 ,把 
所 有 的 逻辑 代码 移 到 相对 应 的 外 部 模块 或 者 文件 。 这 么 做 之 后 ， 当 你 需要 时 ,重要 的 服务 器 配置 
参数 会 整齐 地 出 现在 一 个 地 方 。 





























8.7 使 用 Node.js 和 MongoDB 通过 Mongoskin 和 Express.js 构建 
JSON REST API 服务器 


这 个 教程 会 带 你 使 用 Mocha" 和 Super Agent” 库 写 测试 ， 然 后 使 用 测试 驱动 的 方式 用 
Express.js”、MongoDB" 的 Mongoskin“ 库 开发 一 个 免费 的 Node.js* JSON REST API 服务 器 。 在 这 
个 REST API 服务 器 上 ， 我 们 将 进行 创建 、 更 新 、 移 除 以 及 删除 操作 ( CRUD )， 通 过 使 用 
app.param() 和 app.use() 方 法 实践 Expressjs 的 中 间 件 ”。 








8.7.1 测试 覆盖 率 


在 开始 做 事情 之 前 ， 我 们 写 点 功能 测试 ， 便 于 之 后 向 我 们 的 REST API 服务 器 发 送 HTTP 测 
试 。 如 果 你 已 经 知道 怎么 使 用 Mocha" 或 者 想 直 接 跳跃 阅读 了 解 Express,js 应 用 是 怎么 实现 的 , 完 
全 没 问 题 。 你 也 可 以 使 用 终端 的 CURL 命令 来 测试 。 











GD http://visionmedia.github.io/mocha/ 

@) http://visionmedia.github.io/superagent/ 
@® http://expressjs.com/ 

@ http://www.mongodb.org/ 

(©) https://github.com/kissjs/node-mongoskin 
©© http://nodejs.org 

© http://expressjs.com/api.html#middleware 
http://visionmedia.github.io/mocha/ 
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假设 我 们 已 经 安装 了 Node.js、NPM" 和 MongoDB ， 那 么 创建 一 个 新 的 目录 (或 者 你 已 经 写 
过 测试 了 ， 就 使 用 之 前 的 目录 ): 


mkdir rest-api 
cd rest-api 


我 们 将 要 使 用 Mocha”、Exppectjs? 和 Super Agente 库 。 为 了 安装 它们 ,请 在 项 目 目录 里 运行 
如 下 命令 : 
$ npm install mocha 


$ npm install expect.js 
$ npm install superagent 


现在 在 相同 的 目录 里 创建 一 个 express.testjs 文件 ， 它 将 会 有 6 个 测试 套件 : 
口 创建 一 个 新 对 象 ; 
口 通过 ID 获取 一 个 对 象 ; 
口 获取 整个 集合 ; 
口 通过 ID 更 新 一 个 对 象 ; 
口 通过 ID 检查 一 个 更 新 的 对 象 ; 
口 通过 ID 删除 某 个 对 象 。 

使 用 Super Agent 的 链 式 调 用 函数 , HTTP 请 求 简直 就 是 小 菜 一 碟 儿 , 我 们 将 会 把 它 放 在 每 一 
个 测试 套件 里 。 下 面 是 完整 的 express.testjs 的 源 代码 : 


Var superagent = require('superagent') 
Var expect = require('expect.js') 









































describe('express rest api server', function () { 
var id 


it('post object', function (done) { 
superagent .post('http://localhost:3000/collections/test') 

.Send({ name: 'John' 
,， email: 'john@rpjs.co'! 

} 

.end(function (e, res) { 
// console.1og (res.body) 
expect (e) .to.edql (null) 
expect (res.body.length) .to.eql(1) 
expect (res.body[0]._id.length) .to.eql (24) 
id = res.body[0]._id 
done () 





GD http:/npmjs.org 

© http://visionmedia.github.io/mocha/ 

G@) https://github.com/LearnBoost/expect.js/ 
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it('retrieves an object', function (done) { 
superagent.get('http://localhost:3000/collections/test/' + id) 
.end(function (e, res) { 
// console.1og (res.body) 
expect (e) .to.eql (null) 
expect (typeof res.body) .to.eql('object') 
expect (res.body._id.length) .to.eql (24) 
expect (res.body._id) .to.eqgl (id) 
done() 
}) 
}3 


it('retrieves a collection', function (done) { 
superagent.get('http://localhost:3000/collections/test') 
.end(function (e, res) { 
// console.1og (res.body) 
expect (e) .to.eql (null) 
expect (res.body.1length) .to.be.above(1) 
expect (res.body.map(function (item) { 
return item._id 
})) .to.contain(id) 
done() 
}) 
}) 


it('updates an object', function (done) { 
superagent.put('http://localhost:3000/collections/test/' + id) 
.Send({name: 'Peter' 
,， email: 'peter@yahoo.com'}) 
.end(function (e, res) { 
// console.1og (res.body) 
expect (e) .to.edql (null) 
expect (typeof res.body) .to.eql('object') 
expect (res.body.msg) .to.egql('success') 
done() 
}) 
}) 


it('checks an updated object', function (done) { 
superagent.get('http://localhost:3000/collections/test/' + id) 
"end(funcetion (é&, res) { 
// console.1og (res.body) 
expect (e) .to.edql (null) 
expect (typeof res.body) .to.egl('object') 
expect (res.body._id.length) .to.eql (24) 
expect (res.body._id) .to.eqgl (id) 
) 





expect (res.body.name) .to.eql('Peter') 
donel( 
}) 
)) 


it('removes an object', function (done) { 
superagent.del('http://localhost:3000/collections/test/' + id) 
.end(function (e, res) { 
// console.1og (res.body) 
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expect (e) .to.eqgl (null) 

expect (typeof res.bodqy) .to.eql('object') 
expect (res.body.msg) .to.eql('success') 
done () 


}) 
}) 


运行 测试 ， 我 们 可 以 使 用 $s mocha express.test.js 命令 。 


8.7.2 ”依赖 


在 这 个 教程 里 ,我 们 将 要 使 用 Mongoskin"， 它 是 一 个 MongoDB 库 ， 比 原生 的 MongoDB 驱 
动 ? 更 好 用 。 另 外 ，Mongoskin 比 Mongoose 的 量 级 更 轻 ，Mongoose 的 schema 更 少 。 更 多 信息 可 
以 查看 Mongoskin comparison blurb”。 


Express.js 是 Node.js 核心 模块 HTTP 模块 "的 包装 器 。 它 在 Connect" 中 间 件 的 基础 上 构建 而 
来 ， 提 供 了 大 量 的 方便 。 有 些 人 会 把 它 和 了 Ruby 的 Sinatra 框架 对 比 ， 它 们 同样 开放 和 方便 配置 。 

如 果 在 上 一 节 测 试 覆 盖 率 中 你 已 经 创建 了 *est-api 目录 ,可 以 简单 的 运行 如 下 命令 来 为 应 
用 安装 模块 : 


npm install express 
npm install mongoskin 

















8.7.3 ”实现 
第 一 件 事 ， 定 义 我 们 的 依赖 : 


Var express = require('express') 
, mongoskin = require('mongoskin') 


在 版 本 3x 之 后 , Express 提高 了 实例 化 的 效率 , 也 就 是 说 下 面 的 一 行 代码 会 返回 一 个 服务 需 
对 象 : 


Var app = express() 


为 了 取出 请 求 体 里 的 参数 ,我 们 将 使 用 bodyParser () 中间 件 , 它 看 起 来 更 像 是 个 配置 语句 ; 











app.use (express.bodyParser()) 





GD https://github.com/kissjs/node-mongoskin 

© https://github.com/mongodb/node-mongodb-native 

@) https://github.com/kissjs/node-mongoskin#comparation 
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中 间 件 〈 可 以 是 这 种 形式 "， 也 可 以 是 其 他 形式 ? ) 是 Express.js 和 Connecte 里 一 个 强大 且 方 
便 的 代码 组 织 和 重用 模式 。 

由 于 使 用 了 bodqyParsez () 方 法 , 所 以 我 们 从 HTTP 请 求 里 分 析出 body 对 象 的 痛苦 减轻 了 ， 
Mongoskin 使 得 只 需要 使 用 一 行 代码 就 可 以 连接 到 MongoDB 数据 库 : 

















var db = mongoskin.db('localhost:27017/test', {safe:true}); 


注意 

©@ 如 果 你 想 连 接 到 一 个 远程 数据 库 , 比 如 MongoHQ" 实例 ,需要 提供 你 的 用 户 名 、 
密码 、 主 机 和 端口 值 。 下面 是 一 种 这 样 的 URI 字符 串 格 式 : mongodb:// 
[username:password@]hostl[:port1]。 


app .param() 方 法 是 男 外 一 个 Express.js 中 间 件 。 它 基本 上 就 是 : 每 一 次 请 求 处 理 里 有 一 个 
值 的 时 候 做 一 些 事情 。 当 请 求 字 符 中 有 collectonName 的 时 候 ， 我 们 选择 了 一 个 特殊 的 集合 。 
稍 后 你 会 在 路 由 里 看 到 它 : 


app.param('collectionName', 
function (req, res, next, collectionName) { 
req.collection = db.collection(collectionName) 
return next() 
} 
) 


为 了 用 户 友好 体验 ,我 们 给 根 路 由 添加 一 个 反馈 消息 : 


app.get('/', function (req, res) { 
res.send('please select a collection, e.g., /collections/messages') 


}) 
现在 我 们 真正 的 工作 开始 了 。 下 面 是 我 们 如 何以 _ia 排序 ， 限 制 10 个 获取 项 目的 列表 : 


app.get('/collections/:collectionName', 
function (req, res) { 
req.collection 
“finad( {js 

{limit: 10, sort: [['_id', -1]] 
.toArray (function (e, results) { 
if (e) return next(e) 
res.send(results) 








} 





GD http://expressjs.com/api.html#app.use 

© http://expressjs.com/api.html#middleware 
@® https://github.com/senchalabs/connect 

(@ https:/www.mongohq.com/home 
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你 有 没有 注意 到 URL 字符 串 里 的 :collectionName? 这 个 和 之 前 我 们 使 用 的 app .param() 
中 间 件 会 给 我 们 一 个 指向 数据 库 里 特定 集合 的 req.collection。 


这 个 对 象 创建 略微 简单 点 ， 因 为 我 们 只 需要 把 所 有 的 东西 插入 MongoDB ( 这 种 方法 也 叫 
JSON RESTAPI ) : 


app.post('/collections/:collectionName', function (req, res) { 
req.collection.insert (req.body, {}, function (e, results) { 
if (e) return next(e) 
res.send(results) 
} 
} 


单个 对 象 获取 函数 比 fina() 更 快 ,但 是 它们 的 接口 不 同 (它们 直接 返回 对 象 而 不 是 指针 )， 
所 以 要 小 心 使 用 。 男 外 ， 我 们 通过 Express.js 的 魔力 req.params .id 从 路 径 的 :ia 获取 ID: 


app.get('/collections/:collectionName/:id', function (req, res) { 
req.collection.findOone({_id: req.collection.id(req.params.id)}, 
function (e, result) { 
if (e) return next(e) 
res.send(result) 


} 




















) 
}) 


PUT 请 求 的 处 理 更 加 有 趣 , 因为 update () 不 会 返回 传人 的 对 象 , 而 是 返回 它 修改 的 对 象 的 数量 。 
男 外 {$set:req.body} 也 是 一 个 特殊 的 MongoDB 操作 ( 操作 符 是 以 美元 符 开 着 ), 它 设 置 值 。 


第 二 个 {safe:true，multi :false} 参 数 是 一 个 带 有 选项 的 对 象 ， 它 告诉 MongoDB 在 运 
行 回调 函数 之 前 等 待 执行 并 且 只 处 理 第 一 个 项 目 : 


app.put('/collections/:collectionName/:id', function (req, res) { 
req.collection.update({_id: req.collection.idl(req.params.id)}, 
{Sset: req.body}, 
{safe: true, multi: false}, 
function (e, result) { 
if (e) return next(e) 
res.send((result === 1) ? {msg: 'success'} : {msg: 'error'}) 




















最 后 ，DELETE 方法 也 输出 一 个 自 定义 的 JSON 消息 : 


app.del('/collections/:collectionName/:id', function (req, res) { 
req.collection.remove({_id: req.collection.id(req.params.id)}, 
function (e, result) { 
if (e) return next(e) 
res.send((result === 1) ? {msg: 'success'} : {msg: 'error'}) 


} 
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注意 

delete 是 JavaScript 里 的 一 个 操作 符 ，Express.js 使 用 app.del 替代 它 。 
最 后 一 行 ， 在 端口 3000 开启 服务 器 ， 开 始 监听 : 
app.listen(3000) 
如 果 有 些 时候 它 不 正常 工作 ， 请 参考 完整 的 expressjs 代码 : 


Var express = require('express') 
, mongoskin = require('mongoskin') 








Var app = express() 
app.use (express.bodyParser ()) 


var db = mongoskin.db('localhost:27017/test', {safe: true}); 


app.param('collectionName', 
function (reqgq, res, next, collectionName) { 
req.collection = db.collection(collectionName) 
return next() 


) 
app.get('/', function (req, res) { 
res.send('please select a collection, ' 
+ 'e.g., /collections/messages') 
}) 
app.get('/collections/:collectionName', function (req, res) { 
req.collection.find({}, {limit: 10, sort: [['_id', -1]]}). 
.toArray (function (e, results) { 
if (e) return next(e) 
res.send(results) 


) 
六 


app.post('/collections/:collectionName', function (req, res) { 
req.collection.insert (req.body, {}, function (e, results) { 
if (e) return next(e) 
res.send(results) 
}) 
)) 
app.get('/collections/:collectionName/:id', function (req, res) { 
req.collection.findOone({_id: req.collection.id(regq.params.id)}, 
function (e, result) { 
if (e) return next(e) 
res.send(result) 


) 
}) 
app.put('/collections/:collectionName/:id', function (req, res) { 
req.collection.update({_id: req.collection.id(regq.params.id)}, 
{$set: req.body}, 
{safe: true, multi: false}, 
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function (e, result) { 
if (e) return next(e) 
res.send( (result === 
} 
) 

} 
app.del('/collections/:collectionName/:id', function (req, res) { 
req.collection.remove({_id: req.collection.id(req.params.id)}, 

function (e, result) { 
if (e) return next(e) 
res.send((result === 1) ? {msg: 'success'} : {msg: 'error'}) 
} 
) 
} 


1) ? {msg: 'success'} : {msg: 'error'}) 


app.listen(3000) 
退出 你 的 编辑 器 ， 在 终端 里 运行 : 
$ node express.js 
在 男 一 个 窗口 (不 要 关闭 之 前 的 那个 ) 运行 : 
$ mocha express.test.js 
如 果 你 不 喜欢 Mocha 或 者 BDD，CURL 也 是 可 以 使 用 的 。 
比如 ， 使 用 CURL 发 送 一 个 PosT 请 求 : 
$ curl -qd "" http://localhost:3000 
GET 请 求 在 浏览 器 里 同样 可 用 ， 比 如 http://localhost:3000/test。 
在 这 个 例子 里 , 我 们 的 测试 文件 比 应 用 的 代码 还 长 ,看 上 去 测试 驱动 应 该 被 抛弃 , 但 是 请 相 
信 我 ， 测 试 驱动 的 好 习惯 会 在 开发 复杂 应 用 时 帮 你 节约 很 多 时 间 。 






































8.7.4 总 结 








当 你 需要 使 用 几 行 代码 创建 一 个 简单 的 REST API 服务 器 的 时 候 , Express.js 和 Mongoskin 都 
是 非常 棒 的 库 。 稍 后 ， 如 果 你 想 增 强 这 个 服务 器 ， 它 们 还 提供 了 配置 和 组 织 代码 的 方式 。 


像 MongoDB 这 样 的 NoSQL 数据 库 对 自由 的 REST API 是 有 益 的 ,我 们 不 需要 定义 schemas， 
并 且 可 以 把 任何 数据 给 它们 保存 。 

完整 的 测试 和 应 用 文件 ， 请 浏览 : https://gist.github.com/azat-co/6075685。 

如 果 你 想 学 习 更 多 关于 Express.js 和 其 他 JavaScript 库 以 及 相关 知识 ,可 以 看 看 这 个 系列 :Intro 


to Express.js tutorials "。 




















QD http://webapplog.com/tag/intro-to-express-js/ 
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注意 

个 在 这 个 例子 里 ,我 使 用 了 不 加 分 号 的 代码 格式 。 在 JavaScript 里 分 号 是 可 选 的 "， 
以 下 两 种 情况 除外 : 一 种 是 在 for 循环 里 ， 另 一 种 是 在 以 括号 开头 的 表达 式 
或 者 语句 里 (比如: 立即 调用 的 函数 表达 式 ®)。 


8.8 Node.js MVC: Express.js + Derby Hello World 教程 


8.8.1 Node MVC 框架 


Express.js 是 一 个 流行 node 框架 , 它 使 用 中 间 件 来 增强 应 用 的 功能 。Derby" 是 一 个 MVC"* 框 
， 使 用 时 以 Express "为 中 间 件 。Derby 还 支持 Racer ”数据 同步 引擎 ， 类似 于 Handlebars 的 模板 
引 各 擎 ， 以 及 很 多 其 他 功能 ”。 

















8.8.2” Derby 安装 


让 我 们 在 不 使 用 支架 的 情况 下 设置 一 个 Derby 应 用 。 通常 项 目 生成 器 会 使 学 习 一 个 全 新 的 框 
架 感 觉 困惑 。 这 是 一 个 完全 简单 的 Hello World 应 用 教程 ， 但 是 它 也 拥有 Derby 的 骨架 和 使 用 
websockets 的 实时 模板 。 


当然 , 我 们 需要 Node.js" 和 NPM", 可 以 从 nodejs.org" 获得。 全 局 安装 Derby, 可 以 执行 : 




















$ npm install -9 derby 
检查 Derby 是 否 安 装 
$ derby -V 


写 这 本 书 时 是 2013 年 4 月 ,我 使 用 的 版 本 是 0.3.15。 我 们 应 该 为 创建 第 一 个 应 用 做 好 准备 了 ! 








GD http://blog.izs.me/post/2353458699/an-open-letter-to-JavaScript-leaders-regarding 
© http:/en.wikipedia.org/wiki/Immediately-invoked_function expression 

人 @) http://expressjs.com 

(@ http://derbyjs.com 

(©) http://en.wikipedia.org/wiki/Model%E2%80%93vieco%E2%80%93controller 
© http://expressjs.com 

© https://github.com/codeparty/racer 

https://github.com/wycats/handlebars.js/ 

© http://derbyjs.com/#features 

(0 http://nodejs.org 

DD http://modejs.org 

(D http://modejs.org 





灵 社 区 会 员 whitebaby 专 享 尊重 版 权 


178 ”第 8 章 福利 : Webapplog 上 的 文章 





8.8.3 文件 结构 
这 个 项 目的 目录 结构 如 下 : 


project/ 
-package.json 
-index.js 
-derby-app.js 
views/ 
derby-app.html 
styles/ 
derby-app.less 


8.8.4 依赖 
让 我 们 来 把 一 些 依赖 和 基本 信息 放 到 package.json 文件 里 : 


{ 

"name": "DerbyTutorial", 

"description": ™" 

"version": "0.0.0", 

“malin. v/sServer. Js"; 

"dependencies": { 
"derBy vr vw 
"express": "3.x" 

} 

"private": true 


} 
现在 ， 可 以 运行 apm install， 它 会 把 所 有 的 依赖 下 载 到 node_modules 目录 。 














8.8.5 视图 


视图 必须 放 在 views 目录 ,并且 它们 要 么 在 与 你 的 derby 应 用 js 文件 名 同名 的 目录 里 的 
index.html 文件 中 ， 即 views/derby-app/index.html， 要 么 在 与 derby 应 用 js 同名 的 文件 里 ， 如 
derby-app.html。 


在 这 个 Hello World 应 用 中 ， 我 们 使 用 <Bodqy:> 模 板 和 {message} 变 量 。Derby 使 用 和 
handlebars 类 似 语法 的 模板 mustach" 来 重新 演 染 绑 定 。index.html 是 这 样 的 : 





<Body:> 
<input value="{message}"><hl>{message}</h1l> 


Stylus/LESS 文件 也 同样 如 此 ; 在 我 们 的 例子 里 ，index.css 只 有 一 行 : 





GD http://mustache.github.io/ 
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hl { 
color: blue; 


} 
更 多 精彩 的 CSS 预 处 理 器 ， 请 查看 文档 Stylus" 和 LESS?。 


8.8.6 主 服 务 器 
index.js 是 我 们 的 主 服 务 器 文件 ， 我 们 用 require () 函数 引入 依赖 来 开始 这 个 文件 : 


var http = require('http'), 
express = require('express'), 
derby = require('derby'), 
derbyApp = require('./derby-app'); 


最 后 一 行 是 我 们 的 Derby 应 用 derby-app.js。 
现在 我 们 创建 Express.js 应 用 ( 3.x 与 2x 版 本 有 重大 区 别 ) 和 一 个 HTTP 服务 需 : 


Var expressApp = new express(), 
server = http.createServer (expressApp); 


Derby 和 Racer 数据 同步 库 ， 我 们 这 样 创 建 : 


Var Store = derby.createStorel({ 
listen: server 


上 
从 后 端 获 取 数 据 到 前 端 ， 我 们 需要 实例 化 模型 对 象 : 
var model = store.createModel (); 


最 重要 的 事情 是 需要 把 模型 和 路 由 作为 中 间 件 传 给 Express.js 应 用 。 我 们 需要 指明 public 目 
录 ， 以 便 socket.io 正常 工作 : 




















expressApp. 
use(store.modelMiddleware()). 
use(express.static( dirname + '/public')). 
use(derbyApp.router () ) . 
use (expressApp.router);} 


现在 可 以 在 端口 3001 (或 任意 其 他 端口 ) 打开 服务 器 : 


server.listen(3001, function () { 
model.set('message', 'Hello World!'); 


} 





GD http://learnboost.github.io/stylus/ 
@) http://lesscss.org/ 

@® http://derbyjs.com 

(@ https://github.com/codeparty/racer 
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完整 的 index.js 源码 : 
var http = require('http'), 
express = require('express'), 


derby = require('derby'), 
derbyApp = require('./derby-app'); 


Var expressApp = new express(), 
server = http.createServer (expressApp); 


Var store = derby.createStorel(t{ 
listen: server 


3 
Var model = store.createModel (); 


expressApp. 
use(store.modelMiddleware()). 
use(express.static( dirname + '/public')). 
use(derbyApp.router()). 
use (expressApp.router); 


server.listen(3001, function () { 
model.set('message', 'Hello World!'); 
3 


8.8.7 ”Derby 应 用 


最 终 ， 这 个 Derby 应 用 ， 同 时 包含 了 前 端 代码 和 后 端 代 码 。 前 端 代码 在 app .ready () 回调 
里 。 启 动 它 ， 我 们 来 加 载 并 创建 一 个 应 用 。Derby 使 用 了 一 种 不 常见 的 初始 化 (不 太 像 以 前 的 
module.exports = app): 


Var derby = require('derby'), 
app = derby.createApp (module); 


为 了 使 socket .io 工作 ， 我们 需要 订阅 模型 的 属性 ， 换 言 之 ， 绑 定数 据 与 视图 。 我 们 可 以 
在 根 路 由 里 设置 ， 下 面 是 我 们 如 何 定义 的 : 
app.get('/', function (page, model, params) { 
model.subscribe('message', function () { 
page.render (); 


Es 
}); 


完整 的 derby-app.js 文件 : 


Var derby = require('derby'), 
app = derby.createApp (module); 














app.get('/', function (page, model, params) { 
model.subscribe('message', function () { 
page.render (); 
站 
直 汉 
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8.8.8 运行 Hello World 应 用 


现在 万 事 俱 备 ， 可 以 启动 我 们 的 服务 器 了 。 运 行 node .或 者 node index.js， 然后 用 浏 
览 器 打开 localhost:3001?。 你 会 看 到 类 似 的 东西 : 


e000 Jocalhost 3001 x 
所 Ch localhost- 3001 同 四 闪 公 二 9 三 


hello Wor'e 


Hello World! 








Derby + Express.js Hello World 应 用 


8.8.9 递 值 给 后 端 
当然 ,不 可 变 的 数据 不 是 很 好 ,我 们 可 以 稍微 修改 一 下 应 用 让 前 端 和 后 端 进行 一 点 点 的 交流 。 
在 服务 器 文 件 index.js 里 ,添加 store.afterDb 监听 message 属性 的 set 事件 : 








server.listen(3001, function () { 
model.set('message', 'Hello World!'); 
store.afterDb('set', 'message', function (txn, doc, prevDoc, done) { 
console.1log (txn) 
done (); 


}); 
用 


修改 后 完整 的 mdex.js 的 代码 : 





GD http://localhost:3001 
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Var http = require('http'), 
express = require('express'), 
derby = require('derby'), 
derbyApp = require('./derby-app'); 


Var expressApp = new express(), 
server = http.createServer (expressApp); 


Var store = derby.createStorel(t{ 
listen: server 


1 
Var model = store.createModel (); 


expressApp. 
use(store.modelMiddleware()). 
use(express.static(_ dirname + '/public')). 
use(derbyApp.router()). 
use (expressApp.router); 


server.listen(3001, function () { 
model.set('message', 'Hello World!'); 
store.afterDb('set', 'message', function (txn, doc, 
console.1log (txn) 
done (); 


站 
es 


prevDoc, done) { 


在 Derby 应 用 的 文件 derby-app.js 里 ， 给 app .ready () 添 加 model .on(): 


app.ready (function (model) { 


object) { 
+ object); 


{ 


model.on('set', 'message', function (path, 
console.log('message has been changed: ' 
} 
ps 
修改 后 的 完整 derby-appjjs 源码 : 
Var derby = require('derby'), 
app = derby.createApp (module); 
app.get('/', function (page, model, params) { 
model.subscribe('message', function () { 
page.render(); 
} 
这 
app.ready (function (model) { 
model.on('set', 'message', function (path, object) 
console.log('message has been changed: ' + object); 


}) 
下 


现在 我 们 可 以 同时 在 终端 和 浏览 器 的 开发 者 工具 里 看 到 日 


样 的 : 
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@O localhost3001 


所 了 C Dlocalhost 本 四 办 人 于 为 6 三 


telio Beaueful wor 


Hello Beautiful World! 





ements Resources Network Sources olies Avdns NConole 





加 | 江 A © <top tame>v <pageconteny v rors wamings Logs Debvg 好 

















Hello World 应 用 : 浏览 器 控制 台 日 志 





在 终端 里 看 上 去 如 下 : 


BO 3. node . (node) 让 
[ 6， 
"77114ffe-b34a-467d-a30e-447b54e0a08a .18 " ， 
‘gat" 
:= ] ] 
7114ffe-b34a-467d-a30e-447b54e0a08a .19 " ， 
age', ' lo BeautiWorld!’ ] ] 


7114ffe-b34a-467d-a30e-447b54e0a08， 


"Hello BeautifWorld!" 


"Hello BeautifuWorld!" ] ] 


14ffe-b34a-467d-a30e-447b54e0a08 


BeautifulWorld!" ] ] 
De-447b54e0a08 


tiful wortdl' ] ] 





Hello World 应 用 : 终端 控制 台 日 志 
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更 多 神奇 的 展示 ， 请 查阅 Racer 的 数据 库 属 
动 同步 。 
com/azat-co/5530311®°。 





性 *。 使 用 它 ， 你 可 以 在 视图 和 数据 库 间 进 行 自 
完整 的 Express.js + Derby Hello World 应 用 以 一 个 gist 的 形式 存在 ， 请 浏 


gist.github. 





GD http://derbyjs.com/#persistence 
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总 结 与 推荐 阅读 


提要 : 总 结 本 书 ， 给 出 JavaScript 博文 、 文 章 、 电 子 书 及 其 他 资源 的 列表 。 


总 结 


希望 你 喜欢 本 书 。 知 易 行 难 ， 我 们 尝试 展现 多 种 多 样 的 技术 、 框 架 以 及 现代 Web 敏捷 开发 
中 应 用 的 技巧 。 本 书 涉及 的 主题 包括 : 





D jQuery 

口 AJAX 

DCSS 和 LESS 

口 JSON 和 BSON 

QD Twitter Bootstrap 
D Node.js 

DQ MongoDB 

口 Parse.com 

口 敏捷 方法 

口 Git 

口 Heroku 、MongoHQ 和 Windows Azure 
口 RESTAPI 

口 Backbone.js 

口 AMD 和 Require.js 
口 Express.js 

口 Monk 

DQ Derby 


如 果 你 还 想 获取 更 有 深度 的 知识 或 者 参考 资料 ,只 需 轻 松 点 击 一 下 相关 的 链接 ,或 者 用 网 上 
搜索 一 下 即 可 。 


构建 不 同 版 本 Chat 应 用 时 包含 的 实际 应 用 : 
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DD jQuery + Parse.com JS REST API 
口 Backbone 和 Parse.com JS SDK 
口 Backbone 和 Node.js 

口 Backbone 和 Node.js + MongoDB 


Chat 应 用 具备 一 般 Web 应 用 或 者 移动 应 用 的 各 种 基础 功能 : 获取 数据 、 展 示 数 据 、 提 交 新 
数据 。 其 他 的 例子 包括 : 


口 jQuery + Twitter RESPAPI“Tweet Analyzer” 
口 Parse.com “Save John ” 

口 Node.js “Hello World” 

口 MongoDB “Print Collections” 

口 Derby + Express “Hello World” 

口 Backbone.js “Hello World” 

口 Backbone.js“Apple Database 

口 Monk + Expres.js “REST API Server” 


如 果 你 有 任何 反馈 、 评 论 、 建 议 , 或 者 发 现 拼写 错误 、 程 序 错误 、 错 误 数 据 等 ， 请 提交 一 个 
GitHub issue: https://github.com/azat-co/rpjs/issues。 

















其 他 联系 方式 : @azat co”、http://webapplog.com、http://azat.co。 


如 果 你 喜欢 Node.js 并 且 想 查看 更 多 使 用 Express.js 构建 产品 的 内 容 ， 可 以 阅读 我 的 新 书 
Express.js Guide: The Most Popular Node.js Framework Manual™。 








推荐 阅读 
下 面 是 一 些 资源 、 教 程 、 图 书 和 博客 的 列表 ， 推 荐 大 家 阅读 。 








JavaScript 资 源 和 免费 电子 书 


口 Oh My JS" : 最 好 的 JavaScript 文章 精 选 集 
口 JavaScript For Cats”: 给 新 手 程 序 员 的 介绍 
口 Eloquent JavaScript”: 关于 编程 的 时 新 介绍 

















GD http://twitter.com/azat_co 

©® http:/expressjsguide.com 

© https://leanpub.com/ohmyjs/read 
(@ http://jsforcats.com/ 

© http://eloquentjavascript.net/ 
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口 Superherojs": JS 资源 的 全 面 整合 

口 JavaScript Guide”: Mozilla 开发 者 中 心 的 JavaScript 指南 

口 JavaScript Reference”: Mozilla 开发 者 中 心 的 JavaScript 参考 

口 Why Use Closure": 基于 事件 编程 中 闭 包 的 实际 应 用 

口 Prototypal Inheritance”: 关于 对 象 继承 与 局 部 变量 

口 Control Flow ip Node”: 流程 控制 里 并 行 与 串 行 的 对 比 

口 Truthy and Falsey Values” 

口 How to Write Asynchronous Code”: 怎么 写 异步 代码 

口 Smooth CoffeeScripf*: 免费 的 交互 式 HTMLS5 书籍 ， 快 速 参 考 集合 及 其 他 一 些 好 东西 
口 Developing Backbone.js Applications": Addy Osmani 的 早期 免费 版 (O?Reilly ) 

口 Step by Step from jQuery to Backbone?: 从 jQuery 到 Backbone 的 学 习 指 南 

口 Open Web Platform Daily Digestz: JS 每 日 文摘 

D DISTILLED HYPES; JS 博客 /时 引 



































山 





Javascript 书 籍 


口 JavaScript: The Good Parts™® 
口 JavaScript: The Definitive Guide® 
口 Secrets of the JavaScript Ninjia® 





口 Pro JavaScript Techniques® 





GD http://superherojs.com/ 

© https://developer.mozilla.org/en-US/docs/JavaScript/Guide 

@® https://developer.mozilla.org/en-US/docs/JavaScript/Reference 

(@ http://howtonode.org/why-use-closure 

© http://howtonode.org/prototypical-inheritance 

©© http://howtonode.org/control-flow 

© http://docs.nodejitsu.com/articles/javascript-conventions/what-are-truthy-and-falsy-values 
http://docs.nodejitsu.com/articles/getting-started/control-flow/how-to-write-asynchronous-code 
© http://autotelicum.github.com/Smooth-CoffeeScript/ 

(0 http://addyosmani.github.com/backbone-fundamentals/ 

DD https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md 
@@ http://daily.w3viewer.com/ 

(3 http://distilledhype.com/ 

(@ http://shop.oreilly.com/product/9780596517748.do 

BD http:/www.amazon.com/dp/0596101996/?tag=stackoverfl08-20 

(0 http:/www.manning.com/resig/ 

@ http://www.amazon.com/dp/1590597273/?tag=stackoverfl08-20 
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Node.js 资 源 和 免费 电子 书 


口 Felix’s Node.js Beginners Guide” 

口 Felix’s Node.js Style Guide” 

口 Felixxs Node.js Convincing the boss guide® 
口 mtroduction to NPM” 

DD NPM Cheatsheet® 

口 Interactive Package.json Cheatsheet” 

口 Official Node.js Documentation” 

口 Node Guide® 

口 Node Tuts” 

口 What 1s Node7": Kindle 免费 电子 书 

口 Mastering Node.jsJ: node 开源 电子 书 

口 Mixzs Node pook: 如 何 使 用 Node.js 

口 Learn Node.js Completely and with ConfidenceS: 两 周 自学 JavaScript 指南 
口 How to Node: Node.js 编程 之 禅 




















Node.js 书 籍 


口 7je Node Beginner Book® 
口 Hands-on Node.js® 


口 Backbone Tutorials® 








QD http://nodeguide.com/beginner.html 

© http://nodeguide.com/style.html 

@® http://nodeguide.com/convincing the_boss.html 

(@ http://howtonode.org/introduction-to-npm 

© http://blog.nodejitsu.com/npm-cheatsheet 

© http://package.json.nodejitsu.com/ 

© http://nodejs.org/api/ 

http://nodeguide.com/ 

(9) http://nodetuts.com/ 

(0 http:/www.amazon.com/What-Is-Node-ebook/dp/BO0SISQ7JC 
http://visionmedia.github.com/masteringnode/ 
http://book.mixu.net/ 
http://Javascriptissexy.com/learn-node-js-completely-and-with-confidence/ 
http://howtonode.org/ 

https://leanpub.com/nodebeginner 
https://leanpub.com/hands-on-nodejs 
https://leanpub.com/backbonetutorials 


S860888e 
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口 Smashing Node.js7 

DD The Node Beginner Book” 

口 Hands-on Node.js™ 

口 Node: Up and Running® 

口 Node ,js in Action® 

口 Node: Up and Running : 使 用 JavaScript 构建 可 伸缩 的 服务 器 端 代码 
口 Node Web Development”: 关于 Node 的 实用 介绍 

口 Node Cookbook® 





在 线 互动 课堂 和 教程 


口 Cody Academy”: 交互 式 编程 教学 
口 Programr" 

口 LeamStreet 

口 Treehouse2 

D lynda.com2: 软件 、 创 意 、 商 业 课程 
口 Udacity”: 大 量 在 线 公开 课程 

口 Coursera® 








创业 的 书 和 博客 


口 《黑客 与 画家 》 
口 《精益 创业 》 








GD http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595/ 
© http://www.nodebeginner.org/ 

@® http:/nodetuts.com/handson-nodejs-book.html 

(@ http://shop.oreilly.com/product/0636920015956.do 

© http://www.manning.com/cantelon/ 

© http://www.amazon.com/Node-Running-Scalable-Server-Side-JavaScript/dp/1449398588 
© http://www.amazon.com/Node-Web-Development-David-Herron/dp/184951514X 
http://www.amazon.com/Node-Cookbook-David-Mark-Clements/dp/1849517185/ 

(9) http://www.codecademy.com/ 

(0 http://www.programr.com/ 

DD http://www.learnstreet.com/ 

@@ http://teamtreehouse.com/ 

3 http://www.lynda.com/ 

(@ https://www.udacity.com/ 

(BD https://www.coursera.org/ 
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口 《创业 者 手册 》 

口 The Entrepreneur’s Guide to Customer Development: A cheat sheet to The Four Steps to the 
Epiphany" 

口 Venture Hacks” 

口 WebAppLog” 








GD http:/www.amazon.com/The-Entrepreneurs-Guide-Customer-Development/dp/0982743602/ 
© http://venturehacks.com/ 
@® http://webapplog.com 
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多 六 图 灵 最 新 重点 图 书 


程序 员 苞 区 的 第 一 本 亲子 互动 编程 书 


腾讯 效果 广告 平台 部 商务 研发 中 心 总 监 陈 俊 
全 国 青少年 信息 学 奥林匹克 竞赛 金牌 教练 曹 文 
联 社 推 荐 


> 内 容 经 过 教育 专家 的 评审 ， 经 过 孩子 的 亲身 检 
验 ， 并 得 到 了 家 长 的 认可 





ww 


it us 


翼 | 轿 > 











Compufer Programming for Kids and Ofher Beginners 


公 与 子 护 谊 
篇 程 之 


父 与 子 的 编程 之 旅 
与 小 1 卡特 一 起 学 Python 书号 : 978-7-115-36717-4 
作者 : Warren Sande Carter Sande 
定价 : 69.00 元 








WY aapiaitus 


Ennoitus ETT ELELELE 





Python 基础 教程 


®, (第 2 版 . 修订 版) 





”给 真正 的 初学 者 写 的 入 门 稳 
二 全面 详尽 ，10 个 项目 引人入胜 





OIREILLY” 





A 
































Python 计算 机 视觉 编程 Python 开发 实战 Python 基础 教程 (第 2 版 .修订 版 ) 
书号 : 978-7-115-35232-3 书号 : 978-7-115-32089-6 书号 : 978-7-115-35352-8 
作者 : Jan Erik Solem 作者 : BePROUD 股份 有 限 公司 作者 : Magnus Lie Hetland 
定价 : 69.00 元 定价 : 79.00 元 定价 .79.00 元 
| TCRETITI | 
TCD mmmnsmitus IY mmRriaita# 





程序 员 必 读 让 晤 


软件 来 构 


Software Architecture for Developers 


AngularJs 
: 人 


数据 结构 与 算法 
JavaScript 描 述 


Data Structures & Algorithms wth Javascript 





1 要 Mchael McMilan 
玉昌 颖 村 欢 评 


SR 























程序 员 必 读 之 软件 架构 

书号 ; 978-7=115-37107-2 
作者 : Simon Brown 

定价 : 49.00 元 
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AngularJS 权威 教程 

书号 : 978=-7=-115-36647-4 
作者 : Ari Lerner 

定价 : 99.00 元 
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数据 结构 与 算法 JavaScript 描述 
书号 : 978-7-115-36339-8 
作者 : Michael McMillan 

定价 : 49.00 元 





这 是 一 本 学 习 指 南 ， 也 是 一 本 培 
训 教 材 ， 根 据 程序 员 反 馈 几 经 更 新 。 


作为 拥有 十 余年 开发 经 验 且 一 直 
活跃 在 技术 前 沿 的 资深 软件 工程 师 ， 
Azat 深 知 读者 的 学 习 难 点 与 知识 陷 
阱 ， 他 结合 自己 的 实践 与 培训 经 验 写 
就 此 书 ， 就 是 希望 让 大 家 不 再 需要 去 
肯 星 汲 的 官方 文档 ， 不 再 花费 大 量 时 
间 与 精力 在 网 上 搜罗 各 种 JS 高 级 技 
术 ， 而 是 花 更 少 的 时 间 “学习”， 用 
更 多 的 时 间 “ 实 战 ”。 


如 果 你 是 零 基础 的 初学 者 ， 你 会 
高 兴 地 看 到 书 中 涵盖 几乎 全 部 安装 与 
部 署 操作 ; 如 果 你 是 进 阶 的 初学 者 ， 
或 者 是 熟悉 Ruby on Rails、PHP、 
Perl、Python、Java 等 语言 的 Web 及 
移动 开发 人 员 ， 定 能 通过 书 中 十 几 个 简 
单 的 小 例子 掌握 更 多 的 JavaScript 及 
Node.js 技 术 。 你 不 一 定 借 由 本 书 成 
为 Web 和 移动 开发 专家 ， 但 一 定 能 更 
快 地 构建 出 程序 ! 
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我 读 过 不 少 Web 软 件 工程 的 书 ， 这 是 最 好 最 实用 的 
一 本 ! 文字 简练 、 清 晰 易 懂 。 作 者 分 享 了 巨 多 现代 
Web 应 用 开发 的 技术 诀窍 ， 一步 一 步 ， 讲 解 得 非常 
明白 。 只 要 逐个 完成 书 中 的 “迷你 ”项 目 ， 你 就 可 
以 彻底 理解 怎么 构建 全 栈 Web 应 用 ， 理 解 相关 的 所 
有 组 件 。 


本 来 我 只 想 看 其 中 几 章 ， 但 看 着 看 着 就 情不自禁 地 一 
页 页 翻 了 下 去 ， 结 果 看 完了 整 本 书 。 书 中 的 概念 解释 
得 非常 清楚 ， 而 且 全 都 有 注释 到 位 的 示例 代码 。 想 了 
解 最 新 的 JavaScript 全 栈 开 发 技术 ? 快 看 这 本 书 。 


这 本 书 太 值得 看 了 ， 它 让 我 真正 明白 了 什么 是 敏捷 
JavaScript 开 发 。 我 喜欢 敏捷 和 精益 创业 ， 谁 要 是 想 
掌握 快速 开发 Web 应 用 的 技术 ， 就 看 这 本 书 ， 没 错 。 
关键 是 这 本 书 内 容 全 都 是 干货 ， 极 为 实用 。 看 完 这 本 
书 ， 把 例子 都 做 一 遍 ， 马 上 就 可 以 学 以 致 用 了 。 有 这 
本 书 ， 你 就 不 用 再 看 一 些 讲 Backbone 或 Mongo 的 
JS 书 啦 。 


图 灵 社 区 : iTuring.cn 
热线 : (010) 51095186 转 600 


人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 


这 本 书 很 适合 喜欢 跟着 做 的 读者 ， 满 都 是 实用 的 建议 
和 切合 实际 的 示例 。 如 果 你 打算 自己 一 个 人 搞定 前 后 
端 ， 而 且 哪 儿 哪 儿 都 做 好 ， 那 就 请 看 这 本 书 。 


看 这 本 书 ， 跟 着 做 例子 ， 非 常 有 意思 ! 这 本 书 不 光 给 
你 讲解 ， 还 给 你 演示 ， 告 诉 你 那么 多 技术 各 有 什么 
用 ， 怎么 用 。 这 些 技术 在 所 有 项 目 中 都 是 会 用 到 的 。 


/ 


没有 这 本 书 ， 我 们 Sidepon.com 的 交互 体验 就 不 会 那 
么 好 ， 也 不 会 被 TheNextWeb.com 推 上 头条 ， 更 不 可 
能 盈利 。 





轩 如 守 区 全 是 


看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精 彩 人 生 
微 信 图 灵 教 育 : turingbooks 


